已链接 Owl 个轮播 - 1 个控制另一个

Question

我有 2 个 owl 旋转木马 - 1 个主旋转木马，然后在其下方有一个较小的旋转木马。我正在尝试通过单击较小的轮播项目让较小的轮播控制上面较大的轮播。

我已经分别设置了两个轮播，并为较小的轮播设置了一个点击触发器来控制主轮播。

它确实会更改项目，但始终会更改为主轮播中的第 2 个项目。我想我快到了，但如有任何帮助，我们将不胜感激。

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

您的问题在这一行：

 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]);

已更新 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>

已链接 Owl 个轮播 - 1 个控制另一个

Linked Owl Carousels - 1 controlling the other

jquery

owl-carousel-2