1

jqueryプラグインFlexsliderを使用しています。スライダーのナビゲーションとしてカルーセルを使用しています。ページの読み込み時に最初のカルーセル要素にcssクラス「active」を追加し、ユーザーが別の要素を選択して次の要素に「active」クラスを追加するときに、最初の要素から「active」クラスを削除しようとしています。ユーザーが選択します。

カルーセルはナビゲーションとしては正常に機能していましたが、カルーセルの「開始機能」を使用して、以下に示すようにアクティブクラスを追加すると、スライダーの移動が停止し、1つのスライドに留まります。3〜4回のクリックで機能し、その後動き続けないのは不思議です...

アイデア？

Javascript

<script type="text/javascript" charset="utf-8">
    $(window).load(function() {
        // The slider being synced must be initialized first
        $('#clientthumbs').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: true,
            directionNav: true, 
            slideshow: false,
            itemWidth: 210,
            itemMargin: 20,
            asNavFor: '#clienttestimonials',
            start : function(slider) {
                $('#clientthumbs li').click(function(event) {
                 event.preventDefault();                     
                 $('#clientthumbs li').removeClass('active');                    
                 $(this).addClass('active');
                 $('.flexslider').show();
                 var slideTo = $(this).attr("rel"); //Grab rel value from link;
                 var slideToInt = parseInt(slideTo); 
                 if (slider.currentSlide != slideToInt) {
                    $(this).addClass('active');
                    slider.flexAnimate(slideToInt) //Move the slider to the correct slide (Unless the slider is also already showing the slide we want);
                 }


                });
               }  
        });

        $('#clienttestimonials').flexslider({
            animation: "slide",
            controlNav: false,
            directionNav: false, 
            animationLoop: false,
            slideshow: false,
            sync: "#clientthumbs"
        });
    });
</script>

HTML

<div id="clientthumbs" class="flexslider">
  <ul class="slides">
    <li class="client1"></li>
    <li class="client2"></li>
  </ul>
</div>

<div  id="clienttestimonials" class="flexslider">
  <ul class="slides">
    <li>
      <div class="clientpicsandquotes">  
      </div>       
    </li>
    <li>
      <div class="clientpicsandquotes"> 
      </div>   
    </li>
  </ul>
</div>
4

1 に答える 1

2

#clientthumbsliアイテムと#clienttestimonialsliアイテムにrelタグを追加して、それらが一致することを確認してください。次に、start関数を次のように置き換えます。

start : function(slider) {
   $('#clientthumbs li').click(function(event) {
    event.preventDefault();                     
    $('#clientthumbs li').removeClass('active');                    
    $(this).addClass('active');
    $('.flexslider').show();
    var slideTo = $(this).attr("rel"); //Grab rel value from link;
    var slideToInt = parseInt(slideTo); 
    if (slider.currentSlide != slideToInt) {
       $(this).addClass('active');
       slider.flexAnimate(slideToInt) //Move the slider to the correct slide (Unless the slider is also already showing the slide we want);
    }


}
    });
于 2013-01-25T18:25:53.090 に答える