Jump to content

Custom Next/Prev buttons on Simple Slideshow

Recommended Posts

  • Replies 5
  • Views 763
  • Created
  • Last Reply

I don't have the code for bars but if you wanted plain black arrows that you can adjust the size, change the color if you wish and add a re-sizeable background, I have that:

.sqs-gallery-block-slideshow .sqs-gallery-controls .next,
.sqs-gallery-block-slideshow .sqs-gallery-controls .previous {
  background: none; /*removes the original background behind the arrows*/
}
.sqs-gallery-block-slideshow .sqs-gallery-controls .next::before,
.sqs-gallery-block-slideshow .sqs-gallery-controls .previous::before {
  background:none ;
  color: black;
  font-size: 2.5em; /*this changes the size of the arrows*/
  padding: 10px;
  border-radius: 30%; /*remove this if you don't want the background rounded*/
}
 

This code could work for bars but the id would need to be targeted for your site using the correct block id. We would need to see your site to get that. You can do it if you have the block id chrome extension which can be found here. 

https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde

[data-section-id="5f18b027017682694630c735"] .gallery-reel-control:first-of-type .gallery-reel-control-btn-icon::before {
  content: '-';
  font-family: ariel;
  font-size: 80px;
  font-weight: 900;
}

[data-section-id="5f18b027017682694630c735"] .gallery-reel-control:last-of-type .gallery-reel-control-btn-icon::before {
  content: '-';
  font-family: ariel;
  font-size: 80px;
  font-weight: 900;
}

[data-section-id="5f18b027017682694630c735"] .gallery-reel-control svg {
 display: none;
}

[data-section-id="5f18b027017682694630c735"] .gallery-reel-control .gallery-reel-control-btn-icon {
  transform: scaleX(30%);
}
Link to comment
  • 4 weeks later...
On 1/13/2021 at 8:39 AM, racheljackson said:

Hi Derrick,

This is great and really helpful! Thank you! Is there a way to make the arrows appear outside the image, not overlaid on top?

Thanks,

Rachel

Can you share link to page where you use slideshow? We can check easier.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.