Free-scrolling slideshow?

Is there a solution to getting a slideshow: reel to scroll freely using a trackpad or scroll wheel, rather than click & drag and having the images snap in place?

Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function(){
  window.setInterval(function(){
    {$("html:not(.sqs-modal-lightbox-open) body:not(.sqs-edit-mode-active) .gallery-reel-control:nth-of-type(2) .gallery-reel-control-btn")
    [0].click()}     
  }, 2000);
});
</script>

On 3/24/2023 at 4:22 PM, tuanphan said:

Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function(){
  window.setInterval(function(){
    {$("html:not(.sqs-modal-lightbox-open) body:not(.sqs-edit-mode-active) .gallery-reel-control:nth-of-type(2) .gallery-reel-control-btn")
    [0].click()}     
  }, 2000);
});
</script>

 

@tuanphan Instead of auto-scrolling, is there a way to just make the gallery reel scroll-through instead of click-through? Just like this: https://sarahshermansamuel.com/projects/palm-beach-spanish-revival/

On 8/16/2024 at 12:12 AM, taylorleigh said:

@tuanphan Instead of auto-scrolling, is there a way to just make the gallery reel scroll-through instead of click-through? Just like this: https://sarahshermansamuel.com/projects/palm-beach-spanish-revival/

I haven't tried with Gallery Reel, but if you use Gallery Block (or Gallery Grid), I think we can achieve it.

This morning a member contacted me with their site with scroll gallery, I tried code from my browser (I haven't tested on live site) and it works, If you use Gallery Block, you can try below code.

See video

https://www.loom.com/share/86a6ec5dea2e4f2b821e69f97883e5e5

Code: Add to Code Injection > Footer

<script>
  const body = document.querySelector("body");
const scrollContainer = document.querySelector(".sqs-gallery.sqs-gallery-design-grid");

body.addEventListener("wheel", (evt) => {
    scrollContainer.scrollLeft += evt.deltaY;
});
</script>
<style>
  .sqs-gallery.sqs-gallery-design-grid {
    display: flex;
    overflow-x: hidden;
}

body {
  height: 100vh
}

#canvasWrapper{
  width: 100%;
  max-width: unset;
}
</style>