Jump to content

Make banner slideshow arrows and arrow background transparent

Go to solution Solved by Web_Solutions,

Recommended Posts

Hi guys,

I have a banner slideslow as the first section on my homepage. Ideally I would like the controls to be bullets rather the arrows, but this doesn't seem to be an option for banner slideshows. Instead, I have added a custom code to make the banner switch between slides automatically. I would like to make the arrows and the arrow backgrounds completely transparent so they appear not to be there. Could someone help me with a code for this? I have tried the below:

.pdp-carousel-controls .chevron-prev, .pdp-carousel-controls .chevron-next {
    background-color: transparent;
}

URL: https://threadsonline.co.uk/

Password: asdfghjkl

Thanks! 🙂 

Link to comment
  • Replies 3
  • Views 1k
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution
14 hours ago, threadsonline said:

Hi guys,

I have a banner slideslow as the first section on my homepage. Ideally I would like the controls to be bullets rather the arrows, but this doesn't seem to be an option for banner slideshows. Instead, I have added a custom code to make the banner switch between slides automatically. I would like to make the arrows and the arrow backgrounds completely transparent so they appear not to be there. Could someone help me with a code for this? I have tried the below:

.pdp-carousel-controls .chevron-prev, .pdp-carousel-controls .chevron-next {
    background-color: transparent;
}

URL: https://threadsonline.co.uk/

Password: asdfghjkl

Thanks! 🙂 

Add these code on Custom CSS panel in Website Utilities Website Tools > Custom CSS.

[data-section-id="65b96124899002297ce21714"] .user-items-list-banner-slideshow__arrow-button {
    visibility: hidden !important;
}

 

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
6 hours ago, Web_Solutions said:

Add these code on Custom CSS panel in Website Utilities Website Tools > Custom CSS.

[data-section-id="65b96124899002297ce21714"] .user-items-list-banner-slideshow__arrow-button {
    visibility: hidden !important;
}

 

Worked perfectly, 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.