jQuery下面的多个轮播的每个函数,prev标识符问题

Question

我正在为我的网站使用猫头鹰轮播,并希望在一个页面上多次使用轮播,我已经使用.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');
  });
});