Linked Owl Carousels - 1 controlling the other

Question

I have 2 owl carousels - 1 main carousel then a smaller carousel under it. I'm trying to get the smaller carousel to control the bigger carousel above by clicking a smaller carousel item.

I have set both carousels up seperatley and have an on click trigger for the smaller carousel to control the main.

It does change item but always to the 2nd item on the main carousel. Think i'm nearly there but any help would be greatly appreciated.

JS fiddle: https://jsfiddle.net/o7qe0ahj/1/

HTML:

<div class="main-carousel owl-carousel owl-theme">
   <div id="propertyImage1"><img src="https://dummyimage.com/600x400/000/fff&text=1" alt="property image 1" class="h-full" /></div>
   <div id="propertyImage2"><img src="https://dummyimage.com/600x400/000/fff&text=2" alt="property image 2" class="h-full" /></div>
   <div id="propertyImage3"><img src="https://dummyimage.com/600x400/000/fff&text=3" alt="property image 3" class="h-full" /></div>
</div>


<div id="propertyImages" class="mt-2 property-carousel owl-carousel owl-theme">
  <div><img src="https://dummyimage.com/600x400/000/fff&text=1" alt="property image 1" class="h-full" /></div>
  <div><img src="https://dummyimage.com/600x400/000/fff&text=2" alt="property image 2" class="h-full" /></div>
  <div><img src="https://dummyimage.com/600x400/000/fff&text=3" alt="property image 3" class="h-full" /></div>
</div>

JS:

//main carousel 
var main = $('.main-carousel')
var mainsettings = {
  items:1,
  loop:true,
  margin:10,
  nav:true,
  navText:['<i class="fas fa-chevron-left"></i>', '<i class="fas fa-chevron-right"></i>'],
  dots: false,
};
main.owlCarousel(mainsettings);

//small carousel 
var small = $('.property-carousel')
smallsettings = {
  items:8,
  loop:false,
  margin:10,
  nav:false,
  dots: false,
};
small.owlCarousel(smallsettings);

var main = $('.main-carousel'),
    small = $('.property-carousel'); 

small.on('click img', function(e) {
  main.trigger('to.owl.carousel', [$(this).index(), 300]);
});

Answer 1

Your issue is in this line:

 main.trigger('to.owl.carousel', [$(this).index(), 300]);

Instead of this you need to refer e.target, hence change to:

var index = $(e.target).closest('.owl-item').index();
main.trigger('to.owl.carousel', [index, 300]);

Updated fiddle here

var main = $('.main-carousel'),
        small = $('.property-carousel')
var mainsettings = {
    items:1,
    loop:true,
    margin:10,
    nav:true,
    navText:['<i class="fas fa-chevron-left"></i>', '<i class="fas fa-chevron-right"></i>'],
    dots: false,
};
main.owlCarousel(mainsettings);

//small carousel
var small = $('.property-carousel')
smallsettings = {
    items:8,
    loop:false,
    margin:10,
    nav:false,
    //navText:['<i class="fas fa-chevron-left"></i>', '<i class="fas fa-chevron-right"></i>'],
    dots: false,
};
small.owlCarousel(smallsettings);


small.on('click img', function(e) {
    var index = $(e.target).closest('.owl-item').index();
    main.trigger('to.owl.carousel', [index, 300]);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" >
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>


<div class="main-carousel owl-carousel owl-theme">
    <div id="propertyImage1"><img src="https://dummyimage.com/600x400/000/fff&text=1" alt="property image 1" class="h-full" /></div>
    <div id="propertyImage2"><img src="https://dummyimage.com/600x400/000/fff&text=2" alt="property image 2" class="h-full" /></div>
    <div id="propertyImage3"><img src="https://dummyimage.com/600x400/000/fff&text=3" alt="property image 3" class="h-full" /></div>
</div>


<div id="propertyImages" class="mt-2 property-carousel owl-carousel owl-theme">
    <div><img src="https://dummyimage.com/600x400/000/fff&text=1" alt="property image 1" class="h-full" /></div>
    <div><img src="https://dummyimage.com/600x400/000/fff&text=2" alt="property image 2" class="h-full" /></div>
    <div><img src="https://dummyimage.com/600x400/000/fff&text=3" alt="property image 3" class="h-full" /></div>
</div>