如何让一页上的多个滑块功能彼此分开？

Question

你们过去一直是很好的帮助者。我希望你能再次帮助我！我仍在学习很多东西，但我刚刚遇到了一个我无法自己解决的问题。我读过类似问题的类似帖子，但我无法实施这些解决方案......

我正在为客户制作模板。在这个模板中有一个滑块，效果很好。

问题是：客户端可以在同一页面添加另一个滑块。此时，当您单击箭头时，第二个滑块将不起作用。只有第一个滑块的箭头起作用，并且第二个滑块也会滑动。

所以，我想我明白我应该“定位”滑块代码中每个滑块的特定 ID 或类。与 .find() 相关的东西，但我就是无法让它工作。

具体问题：如何使此代码起作用，以便我的客户可以在一页上添加任意数量的滑块，而滑块不会影响彼此的功能。

希望你能帮助我。

滑块代码：

    $(document).ready(function(){
    // options
    var speed = 500; //transition speed - fade
    var autoswitch = false; //auto slider options
    var autoswitch_speed = 5000; //auto slider speed
    
    // add first initial active class
    $(".slide").first().addClass("active");
    
    // hide all slides
    $(".slide").hide;
    
    // show only active class slide
    $(".active").show();
    

  
  
    // Next Event Handler
    $('.nextbtn').on('click', nextSlide);// call function nextSlide
    
    // Prev Event Handler
    $('.prevbtn').on('click', prevSlide);// call function prevSlide
    
    // Auto Slider Handler
    if(autoswitch == true){
        setInterval(nextSlide,autoswitch_speed);// call function and value 4000
    }
    
    // Switch to next slide
    function nextSlide(){
        $('.active').removeClass('active').addClass('oldActive');
        if($('.oldActive').is(':last-child')){
            $('.slide').first().addClass('active');
        } else {
            $('.oldActive').next().addClass('active');
        }
        $('.oldActive').removeClass('oldActive');
        $('.slide').fadeOut(speed);
        $('.active').fadeIn(speed);
    }
    
    // Switch to prev slide
    function prevSlide(){
        $('.active').removeClass('active').addClass('oldActive');
        if($('.oldActive').is(':first-child')){
            $('.slide').last().addClass('active');
        } else {
            $('.oldActive').prev().addClass('active');
        }
        $('.oldActive').removeClass('oldActive');
        $('.slide').fadeOut(speed);
        $('.active').fadeIn(speed);
    }
});

HTML 标记：

<div class="afbeeldingen-slider-container">  
<div class="plate--container">
    
  
  <div id="container-slider" class="sliderbtn">
    
    <div id="prev" alt="Prev" title="Prev" class="nextbtn">             
                <i class="material-icons">keyboard_backspace</i>
            </div>
    
    <div id="next" alt="Next" title="Next" class="prevbtn"> 
                <i class="material-icons">keyboard_backspace</i>
            </div>          
    
    
    <div id="slider">
      
        {% for afbeelding_voor_slider in afbeelding_slider.afbeeldingen_toevoegen %}
          {% include afbeelding_voor_slider %}
        {% endfor %}
    </div>  
<div style="clear: both;"></div> 


  
</div>  
</div>
</div>

您可以在主题的测试版本中看到两个滑块[此处][1]

第一个滑块是向下一半的“推荐滑块”，第二个滑块是页面底部的“图像滑块”。

[1]：

Answer 1

由于页面上有多个具有相同类的滑块，jQuery 选择最后一个来处理，因为代码是从上到下解析和解释的。

针对您的情况，最好的方法是创建一个全局滑块函数，并在滑块上使用它。比如：

$(".slider").initSlider();

在函数内部，您会找到与滑块相关的所有特定 DOM 元素：

var nextbtn = $(this).find(".nextbtn")

这样代码就会针对每个滑块运行，而不是最后一个。但这是一个非常基本的例子。实际上，我建议使用现有的库，其中已经内置并测试了此功能。看一下 http://jquery.malsup.com/cycle2/ 这是一个非常基本的滑块库，但您可以根据需要扩展它。

我发现您正在使用 Plate cms。 ;) Plate 的

global_asset_url

过滤器中内置了 Cycle2： https://platehub.github.io/docs/templated-reference/filters#global_asset_url