Change Slider “Dots” globally

Hi there

We would like to change all “Slider Dots” (indicators for each slide in a product carousel, slider, etc) with a more “slick” line (attached a screenshot).

Do you know if we can reach this with CSS modifications? And if so, probably how?

Many thanks
-a

Attachments:

You must be logged in to view attached files.

Hello,

Please try adding the following Custom CSS in the Custom CSS area under Theme Settings >> Custom CSS.

.wd-nav-pagin-wrap[class*="wd-style-shape"] span {
    width: 20px; 
    height: 3px;  /* thickness of the line */
    border-radius: 0;
    background-color: #000;     border: none;
}

.wd-nav-pagin-wrap[class*="wd-style-shape"] li.wd-active span {
    background-color: #ff0000;
}

.wd-nav-pagin-wrap[class*="wd-style-shape"] li:not(.wd-active):hover span {
    background-color: #444; 
}

Best Regards,

Amazing, it worked 🙂 Thank you so much…

Hello,

You’re very welcome! If you need anything else, feel free to reach out!

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards,

[Author]

Posts