javascript - 猫头鹰 slider - 重复控件问题

Question

首先是 fiddle :http://jsfiddle.net/krish7878/m2gnrx2v/1/

有两个带有自定义控件的 owl slider 实例，每个实例都由其自己的代码生成，问题是，当单击控件时，两个 slider 都会响应，而不是各自的 slider 响应。

HTML:

<div class="customNavigation">
    <a class="btn prev">
        <i class="fa fa-chevron-left"></i>
    </a>
    <a class="btn next">
        <i class="fa fa-chevron-right"></i>
    </a>

JS:

    // Custom Navigation Events
$(".next").click(function(){
    slider1.trigger('owl.next');
})
$(".prev").click(function(){
    slider1.trigger('owl.prev');
})

代码有点长(但是很简单)，请看fiddle

这一定是 javascript 问题，必须在某处进行更改，我尝试更改按钮的类名，但它们停止工作了。

Answer 1

$(".next") 操作影响所有下一个 css 类。使用不同的 CSS 类或使用更复杂的表达式，如 #slider1 > .next 如果按钮在 slider 内或将 .next 更改为 .nextslider1 和 .nextslider2

示例 ( http://jsfiddle.net/krish7878/m2gnrx2v/1/ )

HTML:

<div class="container">   
        <div id="slider-1">
            ...
        </div>
        <div class="customNavigation">
            <a class="btn prev1"><i class="fa fa-chevron-left"></i></a>
            <a class="btn next1"><i class="fa fa-chevron-right"></i></a>
       </div>
    </div> 
    ... 
    <div class="container">   
        <div id="slider-2">
           ...
        </div>
        <div class="customNavigation">
            <a class="btn prev2"><i class="fa fa-chevron-left"></i></a>
            <a class="btn next2"><i class="fa fa-chevron-right"></i></a>
       </div>
    </div>

Javascript:

    $(document).ready(function() {  

        var slider1 = $("#slider-1");
        slider1.owlCarousel({        
            autoPlay: 3000, 
            items : 5,
            pagination: false,
            stopOnHover: true,
            itemsDesktop : [1199,3],
            itemsDesktopSmall : [979,3]
        });

        $(".next1").click(function(){ slider1.trigger('owl.next'); });
        $(".prev1").click(function(){ slider1.trigger('owl.prev'); });

        var slider2 = $("#slider-2");
        slider2.owlCarousel({        
            autoPlay: 3000,
            items : 5,
            pagination: false,
            stopOnHover: true,
            itemsDesktop : [1199,3],
            itemsDesktopSmall : [979,3]
        });
        $(".next2").click(function(){ slider2.trigger('owl.next'); });
        $(".prev2").click(function(){ slider2.trigger('owl.prev'); });
    });

您还可以使用组成每个 slider 的函数使其更小

    function doSlider(num){
        var slider = $("#slider-" +num);
        slider.owlCarousel({         
            autoPlay: 3000,
            items : 5,
            pagination: false,
            stopOnHover: true,
            itemsDesktop : [1199,3],
            itemsDesktopSmall : [979,3]
        });
        $(".next"+num).click(function(){slider.trigger('owl.next');});
        $(".prev"+num ).click(function(){slider.trigger('owl.prev');});
    }

    $(document).ready(function() {   
        doSlider(1);
        doSlider(2);
    });