How to prevent Squarespace index slideshows pausing

1 Dec

When you want a full-width slideshow on Squarespace, it’s really easy to do. Simply add a Gallery Page to an Index Page and set the Layout to Slideshow. Almost every aspect of the Slideshow can be changed using the Site Styles editor. You can add controls and indicators, set the autoplay duration and choose the transition.

However, there’s one thing that bugs us. If a visitor’s mouse is hovering anywhere within the slideshow, autoplay pauses. The visitor may not even know that there are other slides to see. There isn’t a setting in Site Styles that can prevent this. We’ve seen a few answers that suggest using CSS to switch off all ‘pointer events’ and whilst these work, they prevent visitors from using the controls to manually move through the images.

The CSS we’ve provided below prevents the slideshow from pausing, but it also allows the controls to be used.

  
    /* Index Gallery Slideshow - prevent pause on hover - soundfocus.co.uk */
.tweak-index-gallery-layout-slideshow .Index-gallery-wrapper {
 pointer-events: none!important;
}
.tweak-index-gallery-layout-slideshow .Index-gallery-wrapper .Index-gallery-control {
  pointer-events: auto;
}
  
  

Note: This post was written in 2018 and refers to Brine-family templates on Squarespace 7.0. It does not apply to Squarespace 7.1 as this was introduced a year after this post was published.

CSSslideshowBrine-family