Jump to content

Extending the length of slides/gallery images on a home page

Go to solution Solved by paul2009,

Recommended Posts

Site URL: https://www.lavenderrightsproject.org/

We've got a gallery on our home page, but the slides move very, very quickly, making them hard to read or even interact with. I attempted a workaround this weekend by duplicating each slide, but it is clunky and not idea. Do folks know what kind of coding would work to get the slides to calm down, even for a little while longer? There are zero options for changing duration within the gallery itself.

Link to comment
  • Solution
11 hours ago, LRPTech said:

We've got a gallery on our home page, but the slides move very, very quickly, making them hard to read or even interact with. There are zero options for changing duration within the gallery itself.

You are using a Squarespace 7.0, Brine-family template so you'll find the options in Design > Site Styles.

Whilst you are viewing the Index page where this Gallery resides, open the Site Styles panel and navigate to the INDEX: SLIDESHOW GALLERY section where you'll find the Autoplay Duration setting:

image.thumb.png.da3dce3eeb1ea078f69609a067eb7b7e.png

 

Edited by paul2009

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
  • 3 months later...

Hello @paul2009

Hoping you can help with an issue I'm having related to this. I have set the Autoplay Duration to 1.6 seconds and this works fine, until you hover the cursor over the images and then they stop transitioning. 

SS have said this needs custom CSS to fix. Would you possibly have a solution? 

The site in question is www.stateofplay.events 

Here's a screenflow of what's happening: https://www.loom.com/share/48a80168990343d39f5ab4510711e345

The gallery slideshow is at 3 quarters down the home page. 

Thank you so much

Emily

Link to comment
15 hours ago, emily.revell said:

Hoping you can help with an issue I'm having related to this. I have set the Autoplay Duration to 1.6 seconds and this works fine, until you hover the cursor over the images and then they stop transitioning. 

You can use some CSS to prevent 'pointer events' (mouse movements) from affecting the gallery. To do this, add the following to Design > Custom CSS:

#events .Index-gallery-wrapper.gallery-root {
  pointer-events: none;
}

This is specific to your site because I have included the ID of this particular section on this page (#events) to prevent it from affecting other areas of the site.

  If this post has helped you, please click a 'Like' or 'Thanks' icon below  ⬇️ 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
On 10/6/2022 at 5:05 AM, paul2009 said:

You can use some CSS to prevent 'pointer events' (mouse movements) from affecting the gallery. To do this, add the following to Design > Custom CSS:

#events .Index-gallery-wrapper.gallery-root {
  pointer-events: none;
}

This is specific to your site because I have included the ID of this particular section on this page (#events) to prevent it from affecting other areas of the site.

  If this post has helped you, please click a 'Like' or 'Thanks' icon below  ⬇️ 

That's perfect thank you very much!!!

Emily

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.