更改点的颜色 [英] Change color of the dots

问题描述

我想更改非活动或活动状态下点的默认颜色背景.我使用 Owl Carousel Slider

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.

我尝试了下面的css，但是它不起作用

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

推荐答案

更改所有点的颜色的解决方案:

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

更改活动点的颜色的方法:

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

这篇关于更改点的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！