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 に答える