[英]owl-carousel 2 sync customization
I'm using Two owl carousel sliders with one navigation for my bootstrap website. 我的引导网站使用的是带有一个导航的两个猫头鹰轮播滑块。 In the below code prev
and next
is working perfectly. 在下面的代码prev
和next
工作完美。
The problem that the ondrag
and owl-dots
functions are not working. ondrag
和owl-dots
函数不起作用的问题。 When I click the dot and drag the first slider ( work-class1
) the second slider should slide same like prev
and next
arrow. 当我点击点和拖动第一滑块( work-class1
)第二滑块应滑落同样喜欢prev
和next
箭头。
var o2 = $('#work-class2') o2.owlCarousel({ items: 2, singleItem: true, loop: false, margin: 10, dots: false, pagination: false, nav: false, touchDrag: true, slideBy: 2, mouseDrag: false }); var o1 = $('#work-class1'); o1.owlCarousel({ items: 1, singleItem: true, loop: false, margin: 0, //dots:false, pagination: false, nav: true, touchDrag: true, slideBy: 1, mouseDrag: true }); var o1 = $('#work-class1'), o2 = $('#work-class2'); //Sync o2 by o1 o1.on('click onDragged', '.owl-next', function() { o2.trigger('next.owl.carousel') }); o1.on('click dragged.owl.carousel', '.owl-prev', function() { o2.trigger('prev.owl.carousel') }); //Sync o1 by o2 o2.on('click onDragged', '.owl-next', function() { o1.trigger('next.owl.carousel') }); o2.on('click dragged.owl.carousel', '.owl-prev', function() { o1.trigger('prev.owl.carousel') });
.owl-carousel .owl-nav button.owl-next span, .owl-carousel .owl-nav button.owl-prev span, .owl-carousel button.owl-dot { font-size: 40px; margin: 0 10px; } .owl-dot span { display: block; height: 15px; width: 15px; background: #f00; border-radius: 30px; }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.1/assets/owl.carousel.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.1/owl.carousel.min.js"></script> <div class="container mt-5"> <div class="row"> <div class="col-4"> <div class="owl-carousel work-class1" id="work-class1"> <img src="http://i.imgur.com/RGGxODF.jpg" class="img-fluid" alt="..."> <img src="http://www.idaconcpts.com/wp-content/testing-website-optimization.png" class="img-fluid" alt="..."> </div> </div> <div class="col-8"> <div class="owl-carousel work-class2" id="work-class2"> <img src="http://i.imgur.com/RGGxODF.jpg" class="img-fluid" alt="..."> <img src="http://i.imgur.com/RGGxODF.jpg" class="img-fluid" alt="..."> <img src="http://www.idaconcpts.com/wp-content/testing-website-optimization.png" class="img-fluid" alt="..."> <img src="http://i.imgur.com/RGGxODF.jpg" class="img-fluid" alt="..."> </div> </div> </div> </div>
You can listen to changed.owl.carousel event and then trigger to.owl.carousel
to sync the carousels on click , scroll and drag : 您可以侦听changed.owl.carousel事件,然后在单击 , 滚动和拖动时触发to.owl.carousel
以同步轮播:
// sync o2 on o1
o1.on('changed.owl.carousel', function(event) {
o2.trigger('to.owl.carousel', [event.item.index == 0 ? 0 : 2]);
});
Note the calculation of indices depend on the no of items in the first and second carousel. 请注意, 索引的计算取决于第一和第二轮播中的项目数。 See demo below and a codepen
to fiddle with: 请参阅下面的演示和一个codepen
:
var o2 = $('#work-class2') o2.owlCarousel({ items: 2, singleItem: true, loop: false, margin: 10, dots: false, pagination: false, nav: false, touchDrag: true, slideBy: 2, mouseDrag: false }); var o1 = $('#work-class1'); o1.owlCarousel({ items: 1, singleItem: true, loop: false, margin: 0, //dots:false, pagination: false, nav: true, touchDrag: true, slideBy: 1, mouseDrag: true }); var o1 = $('#work-class1'), o2 = $('#work-class2'); // sync o2 on o1 o1.on('changed.owl.carousel', function(event) { o2.trigger('to.owl.carousel', [event.item.index == 0 ? 0 : 2]); });
.owl-carousel .owl-nav button.owl-next span, .owl-carousel .owl-nav button.owl-prev span, .owl-carousel button.owl-dot { font-size: 40px; margin: 0 10px; } .owl-dot span { display: block; height: 15px; width: 15px; background: #f00; border-radius: 30px; }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.1/assets/owl.carousel.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.1/owl.carousel.min.js"></script> <div class="container mt-5"> <div class="row"> <div class="col-4"> <div class="owl-carousel work-class1" id="work-class1"> <img src="http://i.imgur.com/RGGxODF.jpg" class="img-fluid" alt="..."> <img src="http://www.idaconcpts.com/wp-content/testing-website-optimization.png" class="img-fluid" alt="..."> </div> </div> <div class="col-8"> <div class="owl-carousel work-class2" id="work-class2"> <img src="http://i.imgur.com/RGGxODF.jpg" class="img-fluid" alt="..."> <img src="http://i.imgur.com/RGGxODF.jpg" class="img-fluid" alt="..."> <img src="http://www.idaconcpts.com/wp-content/testing-website-optimization.png" class="img-fluid" alt="..."> <img src="http://i.imgur.com/RGGxODF.jpg" class="img-fluid" alt="..."> </div> </div> </div> </div>
Here's something that works for what you need. 这是适合您需要的东西。 Basically, just changed the second carousel options into an object and referenced that to determine how many slides to switch the secondary carousel by with a translate.owl.carousel call. 基本上,只是将第二个轮播选项更改为一个对象,并引用该对象来确定有多少张幻灯片可以通过调用translate.owl.carousel来切换辅助轮播。 It's also easily extendable should you want to add more slides into the secondary carousel. 如果您想在辅助轮播中添加更多幻灯片,也可以轻松扩展。
var o2 = $('#work-class2')
var o2settings = {
items: 2,
singleItem: true,
loop: false,
margin: 10,
dots: false,
pagination: false,
nav: false,
touchDrag: true,
slideBy: 2,
mouseDrag: false
};
o2.owlCarousel(o2settings);
o1.on('translate.owl.carousel', function(e) {
o2.trigger('to.owl.carousel',e.page.index * o2settings.slideBy);
});
https://jsfiddle.net/ucfnjv5e/1/ https://jsfiddle.net/ucfnjv5e/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.