如何让一页上的多个滑块相互分离？

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>

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

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

Answer 1

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

在您的情况下，最好是创建一个全局滑块功能，并在滑块上使用它。 就像是：

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

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

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

这样，代码将针对每个滑块（而不是最后一个）运行。 但这是一个非常基本的例子。 实际上，我建议您使用现有的库，该库已经内置并经过测试。 看一下http://jquery.malsup.com/cycle2/ ，这是一个非常基本的滑块库，但是您可以随意扩展它。

我看到您正在使用Plate cms。 ;）Plate在其global_asset_url过滤器中内置了global_asset_url ： https : global_asset_url