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

您可以收听 changed.owl.carousel 事件，然后在 click ， scroll 上触发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>

Answer 2

有些东西可以满足您的需求。基本上，只是将第二个轮播选项更改为一个对象，并引用该对象来确定有多少张幻灯片可以通过调用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/

owl-carousel 2同步自定义

2 个答案: