链接的猫头鹰旋转木马 - 1控制另一个

Question

我有2个猫头鹰旋转木马 - 1个主旋转木马，然后是较小的旋转木马。我试图通过单击较小的轮播物品来使较小的旋转木马来控制上面的较大的轮盘。

我已经将两个旋转木马放在seperatley上，并在单击触发器上可以控制较小的旋转木马以控制主。

它确实会更改项目，但始终将其转换为主旋转木马上的第二个项目。认为我快到了，但是任何帮助都将不胜感激。

JS小提琴：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

您的问题在此行中：

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

而不是 this 您需要参考 e.target ，因此更改为：

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

在这里更新了小提琴

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>