Jump to content

Need custom CSS code to change arrow style for carousel

Go to solution Solved by tuanphan,

Recommended Posts

@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

Link to comment
  • Solution
On 4/10/2024 at 9:01 AM, JessicaWare said:

@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

Use this code to Website > Website Tools > Custom CSS. Here I used an example arrow icon url, you can replace with your icon url

body#collection-65ace4e2fb0c2f0015d2b8bf {
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);
}}

image.png.daa5505a0ad3207439cd4777123b12d6.png

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

@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!

Link to comment
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

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
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;
}}

 

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 weeks later...
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?

Screenshot 2024-05-02 at 1.45.23 PM.png

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.

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

Screenshot 2024-05-08 at 8.06.23 PM.png

Can you send all current code in CSS box?

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.