更改点的颜色答案

【问题标题】：Change color of the dots更改点的颜色
【发布时间】：2020-05-08 19:06:21
【问题描述】：

我想更改处于非活动或活动状态的点的默认颜色背景。我使用 猫头鹰旋转木马滑块

这是我要更改点颜色的点。

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

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

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

【问题讨论】：

你需要添加 ex: .owl-pagination .owl-page span{background: blue;}
我试过了，但是没用。

标签： jquery html css owl-carousel

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

试试

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

【讨论】：

您应该做的不仅仅是在答案中提供代码。您应该解释 OP 做错了什么以及您的代码如何解决该问题。

【解决方案3】：

这是给猫头鹰旋转木马的：

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

这是引导轮播：

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

【讨论】：

【解决方案4】：

OWL Carousel，如果你想摆脱活跃和悬停状态的点颜色：

.owl-theme .owl-dots .owl-dot {
    -----
    background-color: transparent;
    &.active, &:hover {
        color: $primary-color(your color);

        span {
            background: transparent; 
        }
      }

    span {
        font-size: 2.5rem;
        font-family: $primary-font (your font);
        background: transparent;
    }
}

【讨论】：