首页 文章

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

提问于
浏览 次
0

我正在为我的网站使用猫头鹰轮播，并希望在一个页面上多次使用轮播，我已经使用.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不是我最强的，我相信我几乎就在那里 .

谢谢

javascript jquery each

2 回答

  • 5

    如果其他人仍然遇到此问题，这是一个有效的例子：

    HTML Markup

    <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');
  });
});
    回复于
  • 0

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

    删除你认为错误的部分：

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

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

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

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

相关问题