html - 如何在 Owl Carousel 中制作自定义点？

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

使用选项 dotsContainer，但有时它会奇怪地工作。

例如

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

接下来将其包含在您的选项对象中。

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