0

私はbxSliderプラグインでばかげた問題に直面しています。私のスライダーは、自動スライディングモードで4つのスライドしか表示しません。しかし、誰かが特定のナビゲーションリンクをクリックすると、そのリンクに関連する別のスライドを追加します。しかし、誰かが前/次のコントロールをクリックしたときにその新しいスライドを削除し、デフォルトのスライダーに4つのスライドをリロードしたかったのです。ただし、その前/次のコントロールでは機能しません。

コードは次のとおりです。 

//Default Slider
var slider= $('.bxslider').bxSlider({
    displaySlideQty : 4,
    moveSlideQty : 4,
    maxSlides: 4,
    auto: true,
    autoStart: true,
    preloadImages: 'visible',
    mode: 'fade',
    pager: false,
});

//If someone clicks any link on navigation
$('#how').click(function(e){
  e.preventDefault();

  if( $('ul.bxslider li.added').length > 0 ){
    $('.bxslider').find('li.added').remove();
  }
  $('.bxslider').append('<li class="added"><a class="fancybox fancybox.iframe" href="http://www.youtube.com/embed/Jwjv7OLazVY?enablejsapi=1&wmode=opaque" title="Click to Watch The Vieo"><img src="img/video.jpg"/></a></li>');
  slider.reloadSlider({
    mode:'fade',
    auto: false,
    autoStart: false,
    pager:false,

  });
  slider.goToSlide(4);

});

#Howタグのスライドが現在のスライドである場合、次/前のコントロールをクリックする場合は、スライド「li.added」を削除して、デフォルトのスライダーに4つのスライドを再ロードします。それは私が次のコードを試しました

$('a.bx-next').click(function(e){
  if( $('ul.bxslider li.added').length > 0 ){
    $('.bxslider').find('li.added').remove();
    slider.reloadSlider({
    mode:'fade',
    auto: true,
    autoStart: true,
    pager:false,

  });
  }
});

しかし、何も起こりません！誰かがこれについて私を助けてくれますか？私が何をしているのですか？こちらが便利なライブテストサイトです。

4

1 に答える 1

1

reloadSliderを呼び出すたびに、次のボタンクリック関数をバインドする必要があることがわかりました。これは、次の前のコントロールを再バインドするため、ページの読み込み時に実行するとイベントのバインドが失われるためです。したがって、リロードするたびにクリックイベントを再バインドしてください。

var bindNext = function(){

 $('a.bx-next').click(function(e){
  if( $('ul.bxslider li.added').length > 0 ){
    $('.bxslider').find('li.added').remove();
    slider.reloadSlider({
    mode:'fade',
    auto: true,
    autoStart: true,
    pager:false,

  });
  }
});

}

次に、reloadSliderを呼び出すときに、呼び出した後にbindNext（）関数を呼び出します。

 $('#forSellers').click(function(e){
  e.preventDefault();

  if( $('ul.bxslider li.added').length > 0 ){
    $('.bxslider').find('li.added').remove();
  }

  $('.bxslider').append('<li class="added"><img src="img/seller.jpg" /></li>');
  slider.reloadSlider({

    auto: false,
    autoStart: false,
    pager:false,

    mode:'fade',
  });
  slider.goToSlide(4);

  bindNext();

});

それは私の側で働いています。

于 2013-03-10T13:26:22.257 に答える