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');
  });
});

Answer 2

我自己无法测试，但试试这个。

删除您认为错误的部分：

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

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

并在您的轮播属性中添加“navigation：true”：

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

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

2 个答案: