两个幻灯片有问题

Question

我在jQuery上制作了幻灯片，它工作得很好，但是如果我在页面上添加了两个副本-在第一个副本中"prev"按钮不会导致幻灯片的最后一个，而是显示空幻灯片，在第二个- "next"按钮不会导致幻灯片的第一个。

$(".slider-open").click(function(){
    var sliderId = $(this).attr("data-type");
    $("#"+sliderId).show();
});
$(".next").click(function(){
    var sliderId = $(this).parent();
    var currentSlide = $(sliderId).find(".active");
    var nextSlide = currentSlide.next();
    if (nextSlide.length === 0){
        nextSlide = $(".slide").first();
    }
    currentSlide.fadeOut(600).removeClass("active");
    nextSlide.fadeIn(600).addClass("active");
});
$(".prev").click(function(){
    var sliderId = $(this).parent();
    var currentSlide = $(sliderId).find(".active");
    var prevSlide = currentSlide.prev();
    if (prevSlide.length === 0){
        prevSlide = $(".slide").last();
    }
    currentSlide.fadeOut(600).removeClass("active");
    prevSlide.fadeIn(600).addClass("active");
});
$(".slides-close").click(function(){
    $("div.slide-wrapper").removeClass("show");
});
<div class="slide-wrapper" id="noGas">
            <div class="slides">
                <a href="" class="slides-close">X</a>
                <div>
                    <figure class="slide active">
                        <img src="./img/slide1.jpg" alt="">
                        <figcaption>1,5 л негазированная</figcaption>
                    </figure>
                    <figure class="slide">
                        <img src="./img/slide1.jpg" alt="">
                        <figcaption>0,5 л негазированная</figcaption>
                    </figure>               
                </div>
            <a href="#" class="prev"><i class="fa fa-chevron-left fa-2x"></i></a>
            <a href="#" class="next"><i class="fa fa-chevron-right fa-2x"></i></a>
            </div>          
        </div>

Answer 1

这个链接可能对你有帮助。

http://bxslider.com/examples/multiple-slideshows

$('#slider1').bxSlider({
  mode: 'fade',
  auto: true,
  autoControls: true,
  pause: 2000
});
$('#slider2').bxSlider({
  auto: true,
  autoControls: true,
  pause: 3000,
  slideMargin: 20
});