Question

我在jQuery上制作幻灯片并且工作正常，但是如果我在页面上添加它的两个副本 - 在第一个副本“prev”按钮不会导致最后一个幻灯片但显示空幻灯片，并在第二个 - “下一个“按钮不会导致第一张幻灯片。

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

麻烦两个幻灯片

1 个答案: