我使用了 Owl Carousel 2 beta,我想对 slider 导航中的点进行不同的样式化(大小和颜色)。
像那样:
不幸的是我有这个:
我试过这段代码:
<div class="owl-dots">
<div class="first owl-dot active"><span></span></div>
<div class="second owl-dot"><span></span></div>
<div class="third owl-dot"><span></span></div>
</div>
.owl-theme .owl-dots .owl-dot.first span {
height: 18px;
width: 18px;
}
.owl-theme .owl-dots .owl-dot.first:hover span,
.owl-theme .owl-dots .owl-dot.first .active span {
background-color: #00c0f1;
}
.owl-theme .owl-dots .owl-dot.second span {
height: 15px;
width: 15px;
}
.owl-theme .owl-dots .owl-dot.second:hover span,
.owl-theme .owl-dots .owl-dot.second .active span {
background-color: #add036;
}
.owl-theme .owl-dots .owl-dot.third span {
height: 12px;
width: 12px;
}
.owl-theme .owl-dots .owl-dot.third:hover span,
.owl-theme .owl-dots .owl-dot.third .active span {
background-color: #ec2426;
}
最佳答案
在你所有的 css 上,owl-dot 类的选择器应该是
.owl-dot.first.active // remove the space you have between .active and .first
此外,您得到的到底有什么问题?在事件状态下无法更改大小或颜色?
关于jquery - Owl Carousel - 以不同方式设计导航中的点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32161169/