0

这是我正在处理的页面的（有点）工作版本：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);
4

2 回答 2

2

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

于 2013-03-05T18:59:04.210 回答
0

为了保持可访问性，试试这个而不是 {display: none}。

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

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

于 2013-03-05T19:01:29.823 回答