How to change banner slideshow arrow shape?

Hi all,

I'm trying to find a way to alter the arrow style in the carousel banner on the home page. I want to change the arrow style to be " >" instead of the default arrow. I'd also like to remove the background colour, including the hover (which brings up the circle even though I set it to white). I've searched on the forum but not found a suitable/working solution. Example below.

Site: https://toroscangar.com

Password: 123123123

How can i achieve this?! 

Thanks a bunch!

Add to Design > Custom CSS

/* List Section - UI Custom Arrows */
button.user-items-list-banner-slideshow__arrow-button svg {
    display: none !important;
}
button.user-items-list-banner-slideshow__arrow-button--left div:before {
    content: "\e006";
    font-family: 'squarespace-ui-font';
    transform: rotate(270deg);
    display: block;
    color: red;
    font-size: 30px;
    line-height: 60px;
}
button.user-items-list-banner-slideshow__arrow-button--right div:before {
    content: "\e006";
    font-family: 'squarespace-ui-font';
    transform: rotate(-270deg);
    display: block;
    color: red;
    font-size: 30px;
    line-height: 60px;
}

Thanks! This is what I'm after. @tuanphan

Any way to make the weight of the arrow smaller/thinner? And for some reason the arrow circle won't go fully black (seems to be a little transparent even though its black in the colour settings?)

Something like the arrow below would be great:

Thanks @tuanphan, getting there! I'd like the arrow weight to match that of the pagination arrow, how can i do that? 

On 4/2/2023 at 9:55 PM, TJC123 said:

Thanks @tuanphan, getting there! I'd like the arrow weight to match that of the pagination arrow, how can i do that? 

Can you share link to a page where you use pagination arrow? I can check arrow style easier

Hi @tuanphan

Page using pagination arrow here: INFANT STROLLER Benebaby</span> — Toros Cangar

Hi @tuanphan. Thank you for the code you've provided in this thread. It has got me close to achieving what I'd like, but for the life of me, I cannot see how to remove the orange background.

Would you have any idea how to remove the background, but leave the white arrows, please?

Site: https://guytobin.co.uk/homex

On 7/3/2024 at 6:25 PM, TomTenjiDigital said:

Hi @tuanphan. Thank you for the code you've provided in this thread. It has got me close to achieving what I'd like, but for the life of me, I cannot see how to remove the orange background.

Would you have any idea how to remove the background, but leave the white arrows, please?

Site: https://guytobin.co.uk/homex

Which page are you referring to? I don't see Slideshow

https://www.guytobin.co.uk/homex

5 hours ago, tuanphan said:

Which page are you referring to? I don't see Slideshow

https://www.guytobin.co.uk/homex

Sorry @tuanphan - I forgot that I had disabled the page. You should be able to access it with the same URL now. Thank you.

On 7/5/2024 at 11:20 PM, TomTenjiDigital said:

Sorry @tuanphan - I forgot that I had disabled the page. You should be able to access it with the same URL now. Thank you.

You can use this code to Custom CSS box

div.user-items-list-banner-slideshow__arrow-icon-background.user-items-list-banner-slideshow__arrow-icon-background-area {
    background-color: transparent !important;
}

8 hours ago, tuanphan said:

You can use this code to Custom CSS box

div.user-items-list-banner-slideshow__arrow-icon-background.user-items-list-banner-slideshow__arrow-icon-background-area {
    background-color: transparent !important;
}

 

Thank you so much!

@tuanphan Your original code here works great on desktop, thank you! How do I apply it to mobile? I tried adding @media only screen and (min-width:767px) before it, but it didn't do anything.

On 9/29/2024 at 3:20 AM, cemitchelldesign said:

@tuanphan Your original code here works great on desktop, thank you! How do I apply it to mobile? I tried adding @media only screen and (min-width:767px) before it, but it didn't do anything.

A lot of code in this thread, you want to make mobile arrow background to transparent, or change mobile arrow to custom icon?

@tuanphan I would like to change the mobile arrows to custom icon. Website is joelslavensdoglodge.com. Custom arrows are towards the bottom of the homepage.

On 10/8/2024 at 8:39 PM, cmitchell said:

@tuanphan I would like to change the mobile arrows to custom icon. Website is joelslavensdoglodge.com. Custom arrows are towards the bottom of the homepage.

Remove above code & Use this code to Custom CSS Box

button[class*="arrow-button"] svg {
    display: none !important;
}
[class*="arrow-icon-background"] {
        background-size: contain;
    background-repeat:no-repeat;
    background-position: center center;
    background-color: transparent !important;
}
button[class*="arrow-button--left"] [class*="arrow-icon-background"] {
    background-image: url(https://content.invisioncic.com/p289038/monthly_2022_09/1773097810_Group12@2x.png.fd2d6dc749f79343ae687e29649cea4f.png);
}
button[class*="arrow-button--right"] [class*="arrow-icon-background"] {
    background-image: url(https://content.invisioncic.com/p289038/monthly_2022_09/1753379866_Group13@2x.png.54c2b0e59adbe1a1f31f46b8b628398d.png);
}