Javascript Owl滑块-重复控件问题

首先是小提琴：

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

HTML:

代码有点长，但很简单，请看一下小提琴

---

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

对每组按钮使用相同的单击事件

我将您的html更改为：

<div class="customNavigation">
<a class="btn1prev">
    <i class="fa fa-chevron-left"></i>
</a>
<a class="btn1next">
    <i class="fa fa-chevron-right"></i>
</a>

注意btn1next和btn1prev。我对第二个按钮也做了同样的事情

---

js fiddle:

您对每组按钮使用相同的单击事件

我将您的html更改为：

<div class="customNavigation">
<a class="btn1prev">
    <i class="fa fa-chevron-left"></i>
</a>
<a class="btn1next">
    <i class="fa fa-chevron-right"></i>
</a>

注意btn1next和btn1prev。我对第二个按钮也做了同样的事情

---

js提琴：

$。下一个动作影响下一个css类。使用不同的CSS类或使用更复杂的表达式，如slider1>。如果按钮在滑块内或正在更改，则单击“下一步”。使用.nextslider1和.nextslider2单击“下一步”

范例

Html:

还可以使用组成每个滑块的函数使其变小

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

---

$。下一个操作将影响所有下一个css类。使用不同的CSS类或使用更复杂的表达式，如slider1>。如果按钮在滑块内或正在更改，则单击“下一步”。使用.nextslider1和.nextslider2单击“下一步”

范例

Html:

还可以使用组成每个滑块的函数使其变小

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

---

“我试图更改按钮的类名，但它们停止工作”–然后你错了，因为这肯定有效。@CBroe:是的，我错了，我将“owl.pre”更改为“owl.pre-2”。“我尝试更改按钮的类名，但它们停止工作”–然后你错了，因为这肯定有效。@CBroe：是的，我做错了，我把“owl.pre”改成了“owl.pre-2”。

<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>

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

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