Question

以下是我正在处理的页面的{有些）工作版本：https://www.the-car-club.com/walsergold/home.asp。内容显示正确，但只能点击最后一张幻灯片上的内容。关于如何在第一对幻灯片中制作内容的任何建议都是互动的？

HTML

<div class="square-slider">
<div class="slide slide1">
    <div class="content light">
        <h3>Recreating The Square Slider</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac eros et augue vulputate 
        aliquet pellentesque vitae tortor. Pellentesque mi velit, euismod nec semper</p>
    </div>
    <img src="images/asset1.png" alt="" class="asset" />
</div>
<div class="slide slide2">
    <div class="content dark">
        <h3>Looks Amazing Right?</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac eros et augue vulputate 
        aliquet pellentesque vitae tortor. Pellentesque mi velit, euismod nec semper</p>
    </div>
    <img src="images/asset2.png" alt="" class="asset" />
</div>
<div class="slide slide3 inverted">
    <div class="content light">
        <h3>And Simple To Use</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac eros et augue vulputate 
        aliquet pellentesque vitae tortor. Pellentesque mi velit, euismod nec semper</p>
    </div>
    <img src="images/asset3.png" alt="" class="asset" />
</div>
<a href="#" class="prev">Prev</a>
<a href="#" class="next">Next</a>
<div class="overlay"></div>

JavaScript（jQuery）

(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);

Answer 1

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

Answer 2

要维护辅助功能，请尝试此操作而不是{display：none}。

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

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

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

2 个答案: