Html 如何在猫头鹰旋转木马中制作自定义点？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37120336/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make custom dots in owl carousel?
提问by Marik Zuckor
I have implemented custom prev next buttons(i ommit css styles for prev next buttons), but havent dots. Who know what is mistake I did?
我已经实现了自定义上一个下一个按钮（我省略了上一个下一个按钮的 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>回答by BulatSa
Use option dotsContainer, but sometimes it works oddly.
使用选项 dotsContainer，但有时它的工作方式很奇怪。
For example
例如
<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>
Next include this inside of your options object.
接下来将其包含在您的选项对象中。
owl.owlCarousel({
dotsContainer: '#carousel-custom-dots'
});
The following tells Owl Carousel 2 to go to a slide based on the index of the dot that was clicked.
下面的命令告诉 Owl Carousel 2 根据单击的点的索引转到幻灯片。
$('.owl-dot').click(function () {
owl.trigger('to.owl.carousel', [$(this).index(), 300]);
});
That should be all you need to get custom dots up and going with Owl Carousel 2.
这应该是您使用 Owl Carousel 2 获得自定义点所需的全部内容。
回答by Gabriele Fagnani
You can solve the problem in this way:
您可以通过以下方式解决问题：
HTML code
HTML代码
<section id="slider" class="content-slider row">
<div class="col-8 owl-carousel slide-cnt">
<div class="slide"><h3>TITOLO</h3></div>
<div class="slide"><h3>TITOLO</h3></div>
<div class="slide"><h3>TITOLO</h3></div>
</div>
<div class="col-4 dots-cnt">
<ul class="elenco-articoli">
<li>Titolo</li>
<li>Titolo</li>
<li>Titolo</li>
</ul>
</div>
JS code:
JS代码：
var owl;
owl = jQuery('.owl-carousel').owlCarousel({
loop:true,
autoplay: true,
autoplaySpeed: 600,
nav:true,
navText: ["<",">"],
dots:false,
items:1
});
jQuery('.elenco-articoli').on('click', 'li', function(e) {
owl.trigger('to.owl.carousel', [jQuery(this).index(), 300]);
});
This work for me.
这对我有用。
If you want you can elaborate on: https://codepen.io/vbeetlejuice/pen/dRaero
如果你愿意，你可以详细说明：https: //codepen.io/vbeetlejuice/pen/dRaero
