12

私は Flexslider を使用していますが、コンテンツの量に応じて各スライドを異なる時間に表示するように求められました。短い文の場合は速く、段落の場合は遅くなります。flexslide で Slideshowspeed 値が 1 つしか許可されていない場合、これを設定するにはどうすればよいですか。私のコード:

$(window).load(function() {
        $('#flexslider1').flexslider({
        easing: "swing",  
        animation: "fade",
        slideshowSpeed: 7000,
        animationSpeed: 600,
        startAt: 0,
        initDelay: 0,
        controlNav: true,
        directionNav: true,
        pausePlay: true,
        pauseText: 'Pause',
        playText: 'Play'
    }); 
});
4

6 に答える 6

10

1 つのスライドの速度だけを他のスライドとは異なるように変更しようとして、同じ問題が発生していました。これは私が使用したスクリプトであり、動作します!

  <script type="text/javascript">
$(window).load(function(){
  $('.flexslider').flexslider({
    animation: "fade",
    slideshowSpeed: 1500,
    animationSpeed: 1000, 
    controlNav: false, 

    start: function(slider){
      slider.removeClass('loading');
    },
    after: function(slider){
        if(slider.currentSlide == 3){
            slider.pause();
            setTimeout(function(){
                slider.play();
            }, 5000);
        }
    }
  });
});

合計 5 つの画像がありますが、4 番目のスライド (slider.currentSlide == 3) を 5 秒間長く表示したいです。

于 2013-02-15T16:49:13.787 に答える
6

私は解決策を見つけたと思います。after callback を使用して、slideshowSpeed の間隔を変更します。

$(window).load(function(){
      $('.flexslider').flexslider({
        animation: "slide",
        slideshowSpeed: time,
        controlNav: false,
        directionNav: false,
        pauseOnAction: false,
        pauseOnHover: false, 
        pausePlay: true,
        after: function(slider){
            clearInterval(slider.animatedSlides); 
            slider.animatedSlides = setInterval(slider.animateSlides,*YOURTIME in MS*)
        },
        start: function(slider){
          $('body').removeClass('loading');
        }
      }); 
    });

それが役に立てば幸い！

ティボー。

于 2012-11-15T08:17:43.560 に答える
5

これは古いことに気づきましたが、私がそうであったように、他の人が見ているように、これを行うこともできます: (FlexSlider v.2.2.2 を使用)。

li に data-duration 属性を追加する

<div class="flexslider" data-animation="fade" data-control-nav="false" data-slideshow="true" data-start-at="0">
    <ul class="slides">
        <li data-duration="6000">
            <img src="http://placehold.it/600x210" alt="Alt" />
        </li>
        <li data-duration="2000">
            <img src="http://placehold.it/600x200" alt="Alt Text" />
        </li>
    </ul>
</div>

そしてあなたのページの初期化で：

$hook = $('.flexslider');
$hook.flexslider({
                    animation: $hook.data('animation'),
                    controlNav: $hook.data('control-nav'),
                    slideshow: $hook.data('slideshow'),
                    startAt: $hook.data('start-at'),
                    pauseOnHover: true,
                    controlNav: false,
                    after: function(slider){
                        // clears the interval
                        slider.stop();
                        // grab the duration to show this slide
                        slider.vars.slideshowSpeed = $(slider.slides[slider.currentSlide]).data('duration');
                        // start the interval
                        slider.play();
                    }
                });

ここでフィドル：

http://jsfiddle.net/uzery/3/

于 2014-06-09T20:56:54.957 に答える
1

最初のスライド アニメーションの後に AFTER コールバック CALL があるため、START コールバックにタイムアウトを追加する必要があります (3 つのスライドの場合)。

  $(window).load(function() {        
    $('.flexslider').flexslider({
        animation: "slide",
        controlNav: false,
        directionNav: false,           
        pausePlay: true,
        animationSpeed: 300,
        start: function(slider) {
            clearInterval(slider.animatedSlides);
            slider.animatedSlides = setInterval(slider.animateSlides, YOUR_TIMEOUT_FOR_FIRST_SLIDE(ONLY FOR START));                
        },
        after: function(slider){
            if(slider.currentSlide == 0) {
               clearInterval(slider.animatedSlides); 
               slider.animatedSlides = setInterval(slider.animateSlides, FIRST_TIMEOUT);
            }
            if(slider.currentSlide == 1) {
               clearInterval(slider.animatedSlides); 
               slider.animatedSlides = setInterval(slider.animateSlides, SECOND_TIMEOUT);
            }
            if(slider.currentSlide == 2) {
               clearInterval(slider.animatedSlides); 
               slider.animatedSlides = setInterval(slider.animateSlides, THIRD_TIMEOUT);
            }
        }          
    });
  });
于 2013-04-07T20:10:15.767 に答える
0

flexsliderはわかりませんが、イベント関数のコールバック後に速度を変更できるはずです。そんな感じ：

$('#flexslider1').flexslider({
easing: "swing",  
animation: "fade",
slideshowSpeed: 7000,
animationSpeed: 600,
startAt: 0, 
initDelay: 0,
controlNav: true,              
directionNav: true,
pausePlay: true,
pauseText: 'Pause',            
playText: 'Play',
after: function(){$(this).flexslider('slideshowSpeed',1000)} 
});

しかし、今、どのスライドで速度を変更する必要があるのでしょうか。flexsliderのドキュメントには、コールバック関数の後に渡される引数に関する情報は記載されていません。また、このプラグインのコーディング方法によっては、オプションをその場で変更することは不可能な場合があります。スライダーを破棄して、現在表示されているステップ/スライドを維持したまま新しいプラグインを再作成する必要があることを示唆しています。奇妙なコーディングです。

したがって、このプラグインのメインの開発者に連絡するか、自分でプラグインを拡張してみることをお勧めします。

于 2012-11-07T12:13:08.387 に答える