Jump to content

Custom Image Controls for Carousel Summary and Gallery Sliders

Go to solution Solved by tuanphan,

Recommended Posts

Hello, 

I'm trying to add custom icons for a Summary Carousel block and a Slideshow Gallery block on my site: 
https://orange-cone-8mgh.squarespace.com/
password: orderxpress

I seem to have figured out how to change them to a custom image icon, and also applied a different custom image icon for the hover effect. 

However, the image over effect makes the button smaller overall - I'm guessing because the hover image is a larger size, to include a 3d shadow. 

What CSS do I need to add here to make sure that on hover effect, the button image is slightly larger, so the button doesn't look like it's getting smaller? 

Here's the code I'm using: 
 

.sqs-gallery-design-carousel .sqs-gallery-controls .next:before {
  background: url('https://static1.squarespace.com/static/64e3d440c78e8d669c139b60/t/64e592ae4100912ad6c6fc61/1692766894561/btn-next.png');
    background-size: contain;
background-repeat: no-repeat;
  background-position: right;
}

.sqs-gallery-design-carousel .sqs-gallery-controls .next:hover:before {
  background: url('https://static1.squarespace.com/static/64e3d440c78e8d669c139b60/t/64e59440b946601f10ea0281/1692767297007/btn-next-hover.png');
    background-size: contain;
background-repeat: no-repeat;
  background-position: right;
}


Also attached a screenshot of the normal / hover image. 

On another note - is it possible to add carousel indicators (those little dots) below a Summary Carousel and a Gallery Slideshow?

Many thanks in advance! 

Screenshot 2023-08-24 at 8.22.48 pm.png

Screenshot 2023-08-24 at 8.22.53 pm.png

Screenshot 2023-08-24 at 8.28.25 pm.png

Screenshot 2023-08-24 at 8.31.33 pm.png

Link to comment
  • Replies 4
  • Views 2k
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

You try this CSS code under

.sqs-gallery-design-carousel .sqs-gallery-controls {
    overflow: visible !important;
}
.sqs-gallery-design-carousel .sqs-gallery-controls .next:hover:before, .sqs-gallery-design-carousel .sqs-gallery-controls .previous:hover:before {
    transform: scale(1.05);
}

 

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
  • 2 months later...
On 11/7/2023 at 12:55 PM, PapaJoe said:

Hello, please how can I achieve the attached carousel screenshot on squarespace 7.1 ?

Screenshot 2023-11-07 064655.png

You can achieve it with List Section Carousel, just add a carousel then share url, we can give the code

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

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.