CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrapowl-carousel
Saravana
Saravana

Reputation: 3496

owl-carousel 2 sync customization

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>

Upvotes: 1

Views: 5305

Answers (2)

Jason
Jason

Reputation: 193

Here's something that works for what you need. 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. It's also easily extendable should you want to add more slides into the secondary 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/

Upvotes: 1

kukkuz
kukkuz

Reputation: 42352

You can listen to changed.owl.carousel event and then trigger to.owl.carousel to sync the carousels on click, scroll and drag :

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

Note the calculation of indices depend on the no of items in the first and second carousel. See demo below and a codepen to fiddle with:

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>

Upvotes: 1

Related Questions