如何解决将幻灯片的数量显示为 owl carousel 的分页?
我正在使用 Owl Carousel 创建一个滑块。我想显示类似“1 of 幻灯片数量”并增加每张幻灯片上的数字。我已经尝试了几种使用 jQuery 的方法,但都没有奏效。
HTML:
<div class='owl-carousel owl-theme'>
<div class='item'>
<span class='article-card-number'></span>
</div>
<div class='item'>
<span class='article-card-number'></span>
</div>
<div class='item'>
<span class='article-card-number'></span>
</div>
<div class='item'>
<span class='article-card-number'></span>
</div>
<div class='item'>
<span class='article-card-number'></span>
</div>
<div class='item'>
<span class='article-card-number'></span>
</div>
</div>
jQuery:
$('.owl-carousel').owlCarousel({
loop:true,margin:20,nav:true,responsive:{
0:{
items:1
},600:{
items:2
},1000:{
items:3
}
},});
var numberOfSlides = $('.item').length;
for (var i = 0; i < numberOfSlides; i++) {
$('.article-card-number').html(i + ' of ' numberOfSlides);
}
非常感谢任何帮助,谢谢。
解决方法
您有两个选择:
使用events:
$('.owl-carousel').owlCarousel({
// your initialisation code
});
owl.on('translated.owl.carousel',function(event) {
$('.article-card-number').text(event.item.index + ' of ' event.item.count);
});
使用info
:
$('.owl-carousel').owlCarousel({
...
info: getInfo
});
function getInfo(i){
$('.article-card-number').text(i.currentPage + ' of ' i.allPages);
}
注意:上面的代码段都没有经过测试,但应该可以工作或需要最少的更改。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。