Owl Carousel - Slide multiple carousels with just one dots carousel slide

Question

I have two carousels that I wanted to used, they both have the same amount of items so it will be fine, BUT I want only to have one navigation dots and be able to trigger multiple dots with the same attributes.

$('.div_main .owl-dots').each(function(index) {
    $(this).attr('data-index','dot-'+index);
});
$('.owl-dots[data-index="dot-0"] button').each(function(index) {
    $(this).attr('data-index','dot-'+index);
});
$('.owl-dots[data-index="dot-1"] button').each(function(index) {
    $(this).attr('data-index','dot-'+index);
});
$('.div_main .owl-dot').click(function(e) {
    e.preventDefault();
    var idx = $(this).data('index');



    $('.div_main').each(function() {
        $(this).find('button.owl-dot').eq(0).attr('data-index',idx).click();
    });
});

The first function is to get all owl-dots and add index attribute to know which is which. the second and third one are the to make them the same, like if this button has data-index="dot-0" also the other owl.dots will be button[data-index="dot-0"] so this time, I either want to trigger one of them and ill just find the other button with the same data-index, but It causes error.

  Uncaught RangeError: Maximum call stack size exceeded

I think there is something wrong with my fourth function. Or is there any instances that one dots will trigger other dots with owl-carousel?

Answer 1

This this click handler:

$('.div_main .owl-dot').click(function(e) {
  e.preventDefault();

  if(!$(this).is(".active"){
   var idx = $(this).data('index');
   $("[data-index='"+idx+"']").not(this).click();
  }
});

Notice the .not(this)!

You had the error, basically because you where saying: «On click on me, click on me.»... Which cause the maximum stack error.

So also checking if the dot already is active will stop the infinite looping.