Need custom CSS code to change arrow style for carousel

Site URL: https://algae-lute-kkft.squarespace.com/
Password: lucid

Hi,

I've been looking for some custom code to change the navigation arrow style for the carousel used on our About page here: https://algae-lute-kkft.squarespace.com/about but can't seem to find any that work.

I'd like the arrow style to look like the attached image. 

Any help much appreciated!

Thanks

Please set password to website it's currently PRIVATE.

@humxahafeex sorry try it now !

@humxahafeex were you able to view the site? Any help would be much appreciated. Thanks!

@tuanphan Hi! Any chance you'd be able to help with this? I've seen some previous posts where you've helped people do similar, but for some reason when I copy the code you've given it doesn't work on my site - I'm guessing I'm not referring to the right block in the code maybe. Any help would be much appreciated! Thanks

@tuanphan thank you!!!

@tuanphan hi again! do you know if I'd be able to switch out the code for this so it uses the same arrows that are used on the bottom of my project pages (have a look at the bottom of the page here: https://www.lucidinteriors.com.au/projects/quarrybarn). I've tried to inspect and replace the icon names with "caret-right-icon--small" and "caret-left-icon--small". But I must be doing something wrong as they just go blank. Thanks in advance!

4 hours ago, JessicaWare said:

@tuanphan hi again! do you know if I'd be able to switch out the code for this so it uses the same arrows that are used on the bottom of my project pages (have a look at the bottom of the page here: https://www.lucidinteriors.com.au/projects/quarrybarn). I've tried to inspect and replace the icon names with "caret-right-icon--small" and "caret-left-icon--small". But I must be doing something wrong as they just go blank. Thanks in advance!

Do you use Personal or Business Plan? I can test new code easier

@tuanphan we have a business plan. That would be amazing if you could test - thanks so much

On 4/17/2024 at 7:05 AM, JessicaWare said:

@tuanphan we have a business plan. That would be amazing if you could test - thanks so much

You can use this CSS code

[data-section-id="660f3e4a407c38034e075266"] {
.user-items-list-carousel__arrow-icon-background.user-items-list-carousel__arrow-icon-background-area {
    background-image: none !important;
}
button:nth-child(2) .user-items-list-carousel__arrow-icon-background.user-items-list-carousel__arrow-icon-background-area:after {
    content: "\e009";
    font-family: 'squarespace-ui-font';
    display: block;
    transform: rotate(-90deg);
    font-size: 40px;
}
button:nth-child(1) .user-items-list-carousel__arrow-icon-background.user-items-list-carousel__arrow-icon-background-area:after {
    content: "\e009";
    font-family: 'squarespace-ui-font';
    display: block;
    transform: rotate(90deg);
    font-size: 40px;
}}

@tuanphan the code didn't work, it made the arrow style look like the attached. Any idea what went wrong?

On 5/2/2024 at 10:47 AM, JessicaWare said:

@tuanphan the code didn't work, it made the arrow style look like the attached. Any idea what went wrong?

Maybe you added code to wrong position. I just tested from my browser and it works.

You try move the code to top of CSS box.

@tuanphan weird - I'm not sure what I could be doing wrong. I've moved the code to the top of the CSS box and it still looks like the attached. I've tried removing and re-adding but it's still the same.

23 hours ago, JessicaWare said:

@tuanphan weird - I'm not sure what I could be doing wrong. I've moved the code to the top of the CSS box and it still looks like the attached. I've tried removing and re-adding but it's still the same.

Can you send all current code in CSS box?