owl-旋转木马 2 同步自定义

Question

我正在为我的 bootstrap 网站使用两个 owl 轮播滑块和一个导航。在下面的代码中，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 事件，然后触发 to.owl.carousel 以在 click 上同步轮播，滚动和拖动 :

// sync o2 on o1
o1.on('changed.owl.carousel', function(event) {
  o2.trigger('to.owl.carousel', [event.item.index == 0 ? 0 : 2]);
});

请注意 指数的计算 取决于第一个和第二个轮播中的项目数。请参阅下面的演示和 codepen 到 fiddle 以及：

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-旋转木马 2 同步自定义

owl-carousel 2 sync customization

html

css

jquery

twitter-bootstrap

owl-carousel