Change color of the dots

问题

I want to change the default color background of the dots on inactive or active state. I use Owl Carousel Slider

Here's the dots I want to change the color of the dots.

I tried the css below but it is not working

.owl-pagination .owl-page{
     background-color: white;

}
.owl-pagination .owl-page .active
{
    background-color: aqua;
}

回答1:

try

.owl-pagination .owl-page span {
    background-color: white;
}
.owl-pagination .owl-page .active span
{
    background-color: aqua;
}

回答2:

This is for Owl Carousel:

.owl-theme .owl-dots .owl-dot span{
    width:10px;
    height:10px;
    margin:5px 7px;
    background: #b71616 !important;
    display:block;
    -webkit-backface-visibility:visible;
    -webkit-transition:opacity 200ms ease;
    -moz-transition:opacity 200ms ease;
    -ms-transition:opacity 200ms ease;
    -o-transition:opacity 200ms ease;
    transition:opacity 200ms ease;
    -webkit-border-radius:30px;
    -moz-border-radius:30px;
    border-radius:30px;
}

This is Bootstrap Carousel:

.carousel-indicators li{
    display:inline-block;
    width:10px;
    height:10px;
    margin:1px;
    text-indent:-999px;
    cursor:pointer;
    background-color: #ff0000 !important;
    border:1px solid #fff;
    border-radius:10px;
}

回答3:

Solution to change the color for all dots:

.owl-carousel span {
    width:10px;
    height:10px;
    margin:5px 7px;
    background: blue !important;
    display:block;
    -webkit-backface-visibility:visible;
    -webkit-transition:opacity 200ms ease;
    -moz-transition:opacity 200ms ease;
    -ms-transition:opacity 200ms ease;
    -o-transition:opacity 200ms ease;
    transition:opacity 200ms ease;
    -webkit-border-radius:30px;
    -moz-border-radius:30px;
    border-radius:30px;
}

Solution to change the color of an active dot:

.owl-carousel .active span {
    width:10px;
    height:10px;
    margin:5px 7px;
    background: red !important;
    display:block;
    -webkit-backface-visibility:visible;
    -webkit-transition:opacity 200ms ease;
    -moz-transition:opacity 200ms ease;
    -ms-transition:opacity 200ms ease;
    -o-transition:opacity 200ms ease;
    transition:opacity 200ms ease;
    -webkit-border-radius:30px;
    -moz-border-radius:30px;
    border-radius:30px;
}

来源：https://stackoverflow.com/questions/39254236/change-color-of-the-dots

标签

jquery

html

css

owl-carousel