Jump to content

Auto-scroll not working for banner slideshow?

Recommended Posts

Hi - I seem to be having trouble with auto-play working for this landing page on my site. For context, the code I am currently using is enabled auto-play/scroll for slideshows across my whole site to play, but it doesn't seem to be working for this specific banner on my site for some reason. Can someone have a look and tell me how to make this specific 'Banner Slideshow' on the homepage auto-play?

Note: The first bit of code I tried was from Will Myers' - Auto Scroll for Carousel & Banner Slideshow’s for Auto Layout Sections in Squarespace 7.1 - when I first used this code in Advanced Settings > Code Injection > Header, it seemed to have worked for a few days on this landing page that I want it to work on, but it had stopped out of now where and I can't seem to get it working again, no matter what I do.

I tried other codes as well but I can't seem to get any of it to work on that specific banner slideshow that I need it to work on.

SquareSpace tech support suggested I use the 'Slideshow: Full' auto-scroll feature, although I am looking to have text on my banner so I don't want the SEO aspect of my site to not be working as properly as I can if I was to use the 'Slideshow: Full' option.

Thankful for any help I can get!! 🙂

banner.png

Link to comment
  • Replies 1
  • Views 632
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

2 hours ago, vzaric said:

Hi - I seem to be having trouble with auto-play working for this landing page on my site. For context, the code I am currently using is enabled auto-play/scroll for slideshows across my whole site to play, but it doesn't seem to be working for this specific banner on my site for some reason. Can someone have a look and tell me how to make this specific 'Banner Slideshow' on the homepage auto-play?

Note: The first bit of code I tried was from Will Myers' - Auto Scroll for Carousel & Banner Slideshow’s for Auto Layout Sections in Squarespace 7.1 - when I first used this code in Advanced Settings > Code Injection > Header, it seemed to have worked for a few days on this landing page that I want it to work on, but it had stopped out of now where and I can't seem to get it working again, no matter what I do.

I tried other codes as well but I can't seem to get any of it to work on that specific banner slideshow that I need it to work on.

SquareSpace tech support suggested I use the 'Slideshow: Full' auto-scroll feature, although I am looking to have text on my banner so I don't want the SEO aspect of my site to not be working as properly as I can if I was to use the 'Slideshow: Full' option.

Thankful for any help I can get!! 🙂

banner.png

Try the following code instead for auto next 

<script>
  (function docReady(fn) {
    // see if DOM is already available
    if (document.readyState === "complete" || document.readyState === "interactive") {
      // call on next available tick
      setTimeout(fn, 1);
    } else {
      document.addEventListener("DOMContentLoaded", fn);
    }
  })(() => {
    if (window.location == window.parent.location) {
      const reelControls = document.querySelectorAll('.user-items-list-banner-slideshow__arrow-button[aria-label*="Next"] .user-items-list-banner-slideshow__arrow-icon-background');
      console.log(reelControls)
      reelControls.forEach(reelControl => {
        (function reelTimer() {
          setTimeout(() => {
            reelControl.click();
            reelTimer();
          }, 2000); // change this value to change the speed
        })();
      })
    }
  });
</script>

solution reference from this post:

 

Press 👍  or mark my comment as solution if you find my sharing useful

🆒 Squarespace pinchzoom lightbox plugin (affiliate link)

👁‍🗨 360 degree photo viewer (affiliate link)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.