javascript - jQuery 每个函数用于多个轮播下一个、上一个标识符问题

Question

我在我的网站上使用 Owl Carousel，并且想在一个页面上多次使用轮播，我已经使用 .each 成功实现了这一点，但是当单击上一个或下一个时，我正在使用 jQuery 代码按钮显示轮播中的项目，它会触发所有轮播。单击下一个/上一个按钮可移动所有轮播中的项目。

jQuery(document).ready(function($) {        
    $(".owlcarousel-slider").each( function() {     
        var $this = $(this);
        var autoscroll = $this.attr("data-autoscroll"); 
        if(autoscroll == 1) {autoscroll = true;} else {autoscroll = false;}

        $this.owlCarousel({
            autoPlay: autoscroll
        });      

        $(".next").click(function(){
            $this.trigger('owl.next');
        })

        $(".prev").click(function(){
            $this.trigger('owl.prev');
        })             
    });
});

我相信错误的代码一定是这一点，

$(".next").click(function(){
    $this.trigger('owl.next');
})

$(".prev").click(function(){
    $this.trigger('owl.prev');
})

不幸的是，我的 jQuery 还不是我最强的，我相信我已经快到了。

谢谢

Answer 1

如果其他人仍然遇到此问题，这里有一个有效的示例:

HTML 标记

<div id="owl-demo" class="owl-carousel owl-theme">
   <div class="item"><h1>1</h1></div>
   <div class="item"><h1>2</h1></div>
   <div class="item"><h1>3</h1></div>
   <div class="item"><h1>4</h1></div>
   <div class="item"><h1>5</h1></div>
   <div class="item"><h1>4</h1></div>
   <div class="item"><h1>5</h1></div>
   <div class="item"><h1>4</h1></div>
   <div class="item"><h1>5</h1></div>
   <div class="item"><h1>4</h1></div>
   <div class="item"><h1>5</h1></div>
</div>
<div class="customNavigation">
   <a class="btn prev">Previous</a>
   <a class="btn next">Next</a>
</div>

Javascript

$(".owl-carousel").each(function() {
  var $this = $(this);
  $this.owlCarousel({
    items : 5
  });
  // Custom Navigation Events
  $this.parent().find(".next").click(function(){
    $this.trigger('owl.next');
  });
  $this.parent().find(".prev").click(function(){
    $this.trigger('owl.prev');
  });
});