Jump to content

Styling Reel Slideshow Arrows

Recommended Posts

I would like to adjust the position and colour of the previous & next arrows in my reel slideshow to be position over the top of the slideshow in the bottom right hand corner and have the colour changed to #fcfcfc. How can I do this? 

See screenshot attached to my colour mockup I would like to replicate. 

I would also like the slideshow to autoplay. How do I achieve this? There does not seem to be any options for this in the settings? 

Screen Shot 2023-04-06 at 4.23.32 pm.png

Link to comment

This CSS should help you with the position of the arrows in the corner:

// Gallery arrows position
.gallery-fullscreen-slideshow[data-controls="arrows"] .gallery-fullscreen-slideshow-controls {
    justify-content: flex-end;
    align-items: flex-end;
}
.gallery-fullscreen-slideshow-control-btn {
  margin-bottom:20px;
}
.gallery-fullscreen-slideshow-control-btn[data-previous] {
    margin-right: 10px;
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment

Can you share your website URL and the page this is on? Is the code I shared still in your Custom CSS?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral 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.