0

ホームページにテキスト スライダーがあり、選択した矢印に応じてスライドを個別に表示する必要があります。現在、最初のスライドのみが表示されており、その後の各スライドは空白です。個々のスライド ショーを作成するには何が欠けていますか?

jsfiddle

jQuery(document).ready(function($){
    // Setup Variables
    var slides = $('#slider_mask .slide_container').children();
    var total_slides = slides.children().length;
    var slide_width = $('#slider_mask').width();
    var current_slide = 0;

    slides.not(':first').hide();
    // Set the width of the slide_container to total width of all slides
    $('#slider_mask .slide_container').width(slide_width*total_slides);

    // Handle Right Arrow Click
    $('#slider_mask .right_button').on('click', function() {

        current_slide++;

        if(current_slide == total_slides){ current_slide = 0; }

        var negative_margin_required = current_slide*slide_width;
        $('#slider_mask .slide_container').stop().animate({marginLeft:-negative_margin_required+'px'},'fast');


    });

    // Handle Left Arrow Click
    $('#slider_mask .left_button').on('click', function() {

        current_slide--;

        if(current_slide < 0){ current_slide = total_slides-1; }

        var negative_margin_required = current_slide*slide_width;
        $('#slider_mask .slide_container').stop().animate({marginLeft:-negative_margin_required+'px'},'fast');

    });
});
4

2 に答える 2

2

このフィドルをチェックしてください。最小限に縮小しました。

固定幅のスライダーマスクから始めて、それ以外の幅を設定しました。

Ludovico Grossiは、スライド要素を左にフロートさせることについて正しいです。それらがフロートのない「ブロック」要素である場合、それらはスタックします。それらが「インライン」要素に変更された場合、それらは固定幅を持つことができません。それらを「インラインブロック」に設定するように機能しましたが、それがすべてのブラウザでサポートされているかどうかはわかりません。それらを「ブロック」として持ち、左にフロートすることは機能します。

他にもいくつか変更を加える必要がありました。その1つは、.animate()関数によって非表示の要素が表示されないことです。これはドキュメントページに記載されています。を呼び出してスライドを非表示にする代わりに.hide()、マスク要素のオーバーフローを非表示に設定すると、スライドが表示されなくなります。

また、container要素ではなく、スライド要素の中央にテキストを配置します。

アップデート：

adeneoのフィドルのコードで始まり、必要な変更を含む別のフィドルを作成しました。追加、削除、または変更されたすべてのコードとCSSの横にコメントを付けました。HTMLに1つの変更を加える必要がありました。すべてをラップする要素を追加しました。それがないと、CSSセレクターは何にも一致しません。<div id="home">

于 2013-03-05T04:20:34.563 に答える
1

CSS を確認します。

スライド: 固定幅、フロート左。

コンテナー: 幅 n_slide * slide_(outer)_width

スライド マスク: 1 つのスライド幅と同じで、オーバーフローが隠されています。

于 2013-03-02T23:17:29.343 に答える