Dawn theme | slider-button

[ChicBotique1]

Hello everyone,

i was able to the change the featured collection from this :

to this :

via this code:

<style>
    .caption {
        display: none !important;
    }

    .slider-button .icon {
        height: 2rem !important; /* Increase the height */
        width: 2rem !important; /* Increase the width */
        background: black;
        border-radius: 50%; /* Make it a circle */
        margin: auto;
        color: white;
        transform: rotate(+90deg);
        display: flex;
        justify-content: center;
        align-items: center;
        border: 5px solid black; /* Increased border thickness */
    }
</style>

how can i fix the arrows direction ? i think it got messed up because i have set my page to RTL ? anyone can help ?

preview link :

https://m5gg7bgsdp7sc19q-68695785713.shopifypreview.com

website link:

Https://ChicBotique.co.il

Thanks in advance

[Vinsinfo · Accepted solution]

@ChicBotique1 If you are looking to display the arrows direction like in the below image. Please follow the steps mentioned below. Let me know whether it is helpful for you.

1. From admin, go to "Online Store" -> "Themes".

2. Click action button from the current theme and select "Edit code".

3. Locate "component-slider.css" file and paste the below code in that file like the below attached screenshot.

slider-component .slider-button--prev .icon {
    transform: rotate(270deg) !important;
}
slider-component .slider-button--next .icon {
    transform: rotate(90deg) !important;
}

If you are not looking for this solution, please share you exact need to help you with this.

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

[ChicBotique1]

works like a charm brother