jquery - owl-carousel slider on drag and dot click 不工作

Question

我正在为我的 Bootstrap 网站使用两个带有一个导航的 Owl Carousel slider 。在下面的代码中，prev 和 next 运行良好。

ondrag 和owl-dots 函数不工作的问题。当我单击圆点并拖动第一个 slider (work-class1) 时，第二个 slider 应该像上一个和下一个箭头一样滑动。

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

试试这个

//拖动使用这个事件

mouseDrag: true,

//点点击

注意:请在您的自定义导航 slider 按钮中替换此代码

    <div class="owl-dots">
      <button role="button" class="owl-next own-custome-trigger">
        <span></span>
      </button>
      <button role="button" class="owl-prev own-custome-trigger">
        <span> </span>
      </button>
   </div>

//点的css

.own-custome-trigger {
background: red;
display: inline-block;
height: 15px;
width: 15px;
border: 0;
border-radius: 50%;
margin-right: 5px;
cursor: pointer;