在jQuery图像滑块上显示html内容

以下是我正在处理的页面的（某种程度上）工作版本：。内容显示正确，但只能单击最后一张幻灯片上的内容。关于如何使前几张幻灯片上的内容具有互动性，有什么建议吗

HTML

重新创建方形滑块
Lorem ipsum dolor sit amet，是一位杰出的献身者。Donec ac eros和augue vulputate
aliquet pellentesque vitae tortor。我是佩伦茨克·维利特，尤伊斯莫·内克·森佩尔

看起来很棒，对吧？
Lorem ipsum dolor sit amet，是一位杰出的献身者。Donec ac eros和augue vulputate
aliquet pellentesque vitae tortor。我是佩伦茨克·维利特，尤伊斯莫·内克·森佩尔

而且使用简单
Lorem ipsum dolor sit amet，是一位杰出的献身者。Donec ac eros和augue vulputate
aliquet pellentesque vitae tortor。我是佩伦茨克·维利特，尤伊斯莫·内克·森佩尔

JavaScript（jQuery）

（函数（$）{
$（'.square slider'）。每个（函数（）{
变量滑块=$（此），
slides=slider.find（'.slide'），
currentSlide=0；
slides.show（）；
$（幻灯片[currentSlide]）.addClass（“活动”）；
$（'.next、.prev'，slider.show（）；
$（'.prev'，滑块）.on（'click'，function（）{
slides.removeClass（'active'）；
当前幻灯片--；
如果（currentSlide<0）currentSlide=slides.length-1；
$（幻灯片[currentSlide]）.addClass（“活动”）；
返回false；
});
$（'next'，slider）.on（'click'，function（）{
slides.removeClass（'active'）；
currentSlide++；
如果（currentSlide>slides.length-1）currentSlide=0；
$（幻灯片[currentSlide]）.addClass（“活动”）；
返回false；
});
});
})（window.jQuery）；

您需要显示：无/阻止幻灯片。在当前代码中，您只需使用“active”类将不透明度从1更改为0。所以元素仍然存在，最后一个元素（slide3）将是唯一可以单击的元素。删除对.show（）的所有引用，编辑css并将display:block添加到“active”

若要保持可访问性，请尝试此操作，而不是{display:none}

.slide {left: -999em;}
.slide.active {left: 0;}

---

但是，您需要将这些样式合并到jQuery中，以防止突然转换

谢谢！这是向前迈出的一大步；然而，这也带来了一个新问题。删除对.show（）的第一个引用已导致所有css转换停止工作。

(function($){

$('.square-slider').each(function(){
    var slider = $(this),
        slides = slider.find('.slide'),
        currentSlide = 0;

    slides.show();
    $(slides[currentSlide]).addClass('active');
    $('.next,.prev', slider).show();

    $('.prev', slider).on('click', function(){
        slides.removeClass('active');
        currentSlide--;
        if(currentSlide < 0) currentSlide = slides.length - 1;
        $(slides[currentSlide]).addClass('active');
        return false;
    });

    $('.next', slider).on('click', function(){
        slides.removeClass('active');
        currentSlide++;
        if(currentSlide > slides.length - 1) currentSlide = 0;
        $(slides[currentSlide]).addClass('active');
        return false;
    });
});

})(window.jQuery);

.slide {left: -999em;}
.slide.active {left: 0;}