猫头鹰旋转木马 2 同步自定义

Question

我正在使用两个猫头鹰轮播滑块和一个导航我的引导网站。在下面的代码中，prev和next运行良好。

ondrag和owl-dots功能不起作用的问题。当我单击点并拖动第一个滑块(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>

Answer 1

这里有一些东西可以满足你的需求。 基本上，只是将第二个轮播选项更改为一个对象并引用该选项以确定通过 translate.owl.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/

Answer 2

您可以收听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]);
});

请注意，指数的计算取决于第一个和第二个轮播中的项目数。请参阅下面的演示和摆弄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>