程序员最近都爱上了这个网站  程序员们快来瞅瞅吧！  it98k网:it98k.com

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

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

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

因此，我想我明白我应该“定位”滑块代码中每个滑块的特定 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>

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

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

解决方案

由于页面上有多个具有相同类的滑块，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