I have implemented two owl carousel sliders with a single navigation on my bootstrap website. The issue I am facing is that the functions ondrag and owl-dots are not functioning as expected. What I want is for the second slider to slide in sync with the first slider when clicking the dots or dragging the first slider (work-class1). Both the prev and next arrows are working perfectly.
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>