如何在猫头鹰轮播中制作自定义圆点？

Question

我实现了自定义的上一个下一个按钮（我省略了上一个下一个按钮的css样式），但是没有点。谁知道我做错了什么？

// owl.carousel.css

.owl-controls {
    text-align: center;
}
.owl-controls .owl-dot {
    display: inline-block;
}
.owl-controls .owl-dot span {
    background-color: #333;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    display: block;
    height: 12px;
    margin: 5px 7px;
    width: 12px;
    filter: Alpha(Opacity=500);/*IE7 fix*/
    opacity: 0.5;
}
.owl-controls .owl-dot.active span, .owl-controls .owl-dot:hover span {
    filter: Alpha(Opacity=100);/*IE7 fix*/
    opacity: 1;
}

<script>
		$(document).ready(function(){
		  	$('.owl-carousel').owlCarousel({
		    loop:true,
		    margin:10,
		    nav:true,
		    navText: ["<img src='prevArrow.png'>","<img src='nextArrow.png'>"],
		    responsive:{
	        0:{
	            items:1
	        },
	        600:{
	            items:1
	        },
	        1000:{
	            items:1
	        }
		    }
			})
		});
	</script>

<div class="owl-carousel">
	  <img src="lylka.png" alt="">
	  <img src="lylka.png" alt="">
	  <img src="lylka.png" alt="">
	  <img src="lylka.png" alt="">
	  <img src="lylka.png" alt="">
</div>

Answer 1

使用选项dotContainer，但有时效果不佳。

例如

<div id='carousel' class='owl-carousel'> 
  <div class='item'></div> 
  <div class='item'></div> 
  <div class='item'></div> 
</div>
<ul id='carousel-custom-dots' class='owl-dots'> 
  <li class='owl-dot'><!-- Anything in here --></li> 
  <li class='owl-dot'></li> 
  <li class='owl-dot'></li> 
</ul>

接下来，将此内容包含在您的options对象中。

owl.owlCarousel({
  dotsContainer: '#carousel-custom-dots'
});

以下内容告诉Owl Carousel 2根据单击的点的索引转到幻灯片。

$('.owl-dot').click(function () {
  owl.trigger('to.owl.carousel', [$(this).index(), 300]);
});

那应该是您需要定制点并与Owl Carousel 2一起使用的全部。

通过http://derickruiz.com/owl-carousel-custom-dots