私は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'
});
});
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秒間長くします。
私は解決策を見つけたと思います。コールバック後に、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');
}
});
});
それが役に立てば幸い!
ティボー。
これは古いことに気づきますが、私がそうであるように見ている他の人にとっては、これを行うこともできます(FlexSlider v.2.2.2を使用)。
データ期間属性をliに追加する
<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();
}
});
ここでフィドル:
上記の2つの答えを組み合わせる
$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,
start: function(slider) {
var start_time = $(slider.slides[slider.currentSlide]).data('duration');
clearInterval(slider.animatedSlides);
slider.animatedSlides = setInterval(slider.animateSlides, start_time);
},
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();
}
});
最初のスライドアニメーションの後のコールバック呼び出しの後、タイムアウトを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);
}
}
});
});
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のドキュメントでは、コールバック関数の後に渡される引数についての情報は提供されていません。そして、このプラグインがどのようにコード化されているかによって、オプションをその場で変更することはおそらく不可能であり、スライダーを破棄して新しいステップを再作成する必要があることを示唆しています。
したがって、このプラグインのメイン開発者に連絡するか、自分で拡張することをお勧めします。