I used this combined with code from another site to achieve my desired outcome. I wanted to make an auto scrolling bar down the bottom with logos to run through and found some solutions would crop the images and make it a little frustrating to deal with. Solution for my fix:
FOR AUTO SCROLLING:
PAGE>ADVANCED>CODE INJECTION (ADJUSTABLE CODE IS BOLD)
Gallery: 1 will select the first reel on your page. Change to 2/3/4 etc if multiple on the page. Direction: 1 for right, 2 for left scroll Timing: In milliseconds. 3000 for 3 second scroll.
<script>
/**
* Gallery Section Auto Scroller
**/
(function () {
setAutoScroll({ gallery: 1,
direction: 2,
timing: 3000,
});
/*
* Copy and paste the above code
* to target more auto-scrolling
* sections
**/
/** gallery
* gallery section order on the page. Ex:
* 1 = the first gallery section on a page,
* 2 = the second gallery section on a page
**/
/** direction
* direction the gallery should go in.
* 1 = backwards,
* 2 = forwards
**/
/** timing
* timing between each slide, in milliseconds. Ex:
* 2000 = 2 seconds
**/
function setAutoScroll(settings) {
function init() {
let section = document.querySelectorAll(".page-section.gallery-section")[settings.gallery - 1];
function clickArrow() {
if (section && !document.querySelector("html.sqs-modal-lightbox-open") && !document.hidden && !document.querySelector("body.sqs-edit-mode")) {
let arrow = section.querySelectorAll(".gallery-reel-control .gallery-reel-control-btn")[settings.direction - 1];
if (arrow) arrow.click();
}
}
window.setInterval(clickArrow, settings.timing);
}
window.addEventListener("DOMContentLoaded", init);
}
})();
</script> To then adjust image sizes and padding (use the scale to adjust size of images)
DESIGN>CUSTOM CSS
[data-section-id="INSERT SECTION ID NUMBER HERE"].gallery-reel {
padding-right:0px;
padding-left:0px;
height:20vh !important;
.gallery-reel-item img {
transform: scale(.75);
}
}
It is best practice to ensure the images are all the same size image to ensure this works as you desire.
