1

私はJSが初めてで、この種のスライダー では、Flex Slider(thumbnail-slider) のスタイルに関連する問題があります。画像の最後のスライドで余分なスペースが生成され、画像が画面の左側に表示されるため、最後のスライドが正しく表示されません..

スクリプトのコードは次のとおりです。

$(window).load(function(){
  $('#flex_carousel').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: true,
    slideshow: true,
    itemWidth: 380,
    itemMargin: 5,
    maxItems: 3,
    pauseOnHover: false,
    pauseOnAction: false, 
    asNavFor: '#flex_main_slider'
  });

  $('#flex_main_slider').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: true,
    slideshow: true,

    animationSpeed:1000,
    slideshowSpeed:2000,
    sync: "#flex_carousel",
    start: function(slider){
    $('body').removeClass('loading');
    }
  });
});

そして、これはスライダーを表示するためのページ上のコードです..

      <ul class="slides">
        <li>
            <img src="images/frex1.jpg" />
                <div class="flex-thumbnal-area">
                <span>Producing<h4>Quality</h4></span>
                <input type="submit" name="button" class="flex-btn" value="Explore More" />
                </div>
            </li>
            <li>
            <img src="images/frex2.jpg" />
                <div class="flex-thumbnal-area">
                <span>Producing<h4>Quality</h4></span>
                <input type="submit" name="button" class="flex-btn" value="Explore More" />
                </div>
            </li>

助けてください...できるだけ早く感謝します..

4

1 に答える 1

-1

あなたはここにいくつか欠けています：

  • $(window).loadの代わりに呼び出す$(document).ready
  • 誤ったセレクターで flexslider を 2 回呼び出す

このスライダープラグインが機能するために必要なマークアップ。また、flexslider 関数を 2 回呼び出しており、セレクターが正しくありません。こちらの作業サンプルをご覧ください。

于 2013-06-05T12:13:12.207 に答える