owl-carousel slider on drag and dot click not work

Question

I'm using Two owl carousel sliders with one navigation for my bootstrap website. In the below code prev and next is working perfectly.

The problem that the ondrag and owl-dots functions are not working. When I click the dot and drag the first slider (work-class1) the second slider should slide same like prev and next arrow.

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

Try this

//for drag use this event

mouseDrag: true,

//for dot click

note: Please replace this code in your custom navigation slider button

    <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 for dots

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

}

Answer 2

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.

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);

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')
});

o1.on('translate.owl.carousel', function(e) {
  o2.trigger('to.owl.carousel',e.page.index * o2settings.slideBy);
});
//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-dot span {
  display: block;
  height: 15px;
  width: 15px;
  background: #f00;
  border-radius: 30px;
}

.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;
}

<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>