11

私はflexsliderプラグインを使用していますが、次のスライドを表示する簡単な方法があるかどうかを知りたいと思いました（簡単な答えが見つからない場合に行うプラグインのコアを変更することは別として）現在のスライドをクリックしたとき。私はこのようにフレックススライダーをセットアップしました

$('.flexslider').flexslider({
    directionNav : false,
    slideshow: false,
        animation: "slide",
        controlsContainer: ".flex-container"
    });

Prev / Nextコマンドが気に入らなかったので、無効にしました。私は何をすべきか？

4

4 に答える 4

42

少し遅すぎるかもしれませんが、Flexslider 2 の解決策は次のとおりです。

$('.flexslider').flexslider({
    directionNav : false,
    slideshow: false,
    animation: "slide",
    controlsContainer: ".flex-container",
    start: function(slider) {
    $('.slides li img').click(function(event){
        event.preventDefault();
        slider.flexAnimate(slider.getTarget("next"));
    });
}
});
于 2012-07-04T16:10:48.767 に答える
1

上記のコードで Safari の問題が発生しました。これは私の簡単な解決策です。

jQuery( document ).ready( function( $ ) {
    $('.flexslider').on('click', function(){
        $(this).find('.flex-next').click();
    });  
}


$(window).load(function() { 
    // Slider
    $('.flexslider').flexslider({
    directionNav : false,
    slideshow: false,
    animation: "slide",
    controlsContainer: ".flex-container"    
    });
});
于 2015-01-24T14:48:46.907 に答える
-1

各スライダー アニメーションが完了したら、アクティブなスライドを見つけて、画像の src を変更します。

$('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    slideshow: false,
    touch: true,
    itemWidth: 235,
    itemMargin: 10,
    after: function (slider) {
      $(slider).find('.flex-active-slide').find("img").each(function () {
      var src = $(this).attr("data-src");
      $(this).attr("src", src).removeAttr("data-src");
   });
});
于 2013-07-26T09:48:11.093 に答える