How to change the color of the navigators and the indicators?

[Vince]

Hi,

I want to change the colors of the navigators (by default white) and the not selected indicators (also by default white)? See my attachment for more details.

Best regards,

Vince

Attachment: Naamloos_d51d75eb.png

[Saritha Sankar]

Hi Vince,

To achieve the desired visual styling for the Carousel component, you can use the following CSS style to customize the colors of both the navigators and the indicators.

Refer the below codes and sample for your reference.
 

 

    .e-carousel .e-carousel-navigators .e-next .e-btn:not(:disabled) .e-btn-icon,

    .e-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled) .e-btn-icon

    {

        color: red !important;

    }

   

    .e-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar:not(.e-active) .e-btn > div    {

      background-color: red !important;

    }

Sample Link: https://blazorplayground.syncfusion.com/rDBotchbqgoPDGKT
UG: Style and Appearance in Blazor Carousel Component | Syncfusion

Please let us know if you need any further assistance.

Regards,

Saritha S.

[Vince]

Thanks for the reply. It works!

[Vijay Ravi]

Hi Vince,

Thank you for the update. We're glad to hear that the provided solution meets your requirements. Reach out to us if you need any further assistance. We are here to help you.

Regards,

Vijay