下記のソースでスライドショーを作りました。画像はA~Dの四枚です。これを、例えば、画像A、Bは1秒、画像Cは２秒、画像Dは３秒・・・といった感じで、画像毎に表示時間が変わるようにしたいのですが、オプションなどを調べましたが、みつけることができませんでした。よろしくお願いいたします。 $(document).ready(function(){ $('#bxslider').bxSlider({ auto:true, speed:1600, pause:1200, mode:'fade', pager:false, controls:false, infiniteLoop:true }); });

詳しい人求む！

bxsliderで画像毎に表示時間を変えたい

解決済

質問者：suzukasuzuka
質問日時：2016/09/27 10:57
回答数：2件

下記のソースでスライドショーを作りました。
画像はA~Dの四枚です。

これを、例えば、画像A、Bは1秒、画像Cは２秒、画像Dは３秒・・・といった感じで、画像毎に表示時間が変わるようにしたいのですが、オプションなどを調べましたが、みつけることができませんでした。
よろしくお願いいたします。

<script>
$(document).ready(function(){
$('#bxslider').bxSlider({
auto:true,
speed:1600,
pause:1200,
mode:'fade',
pager:false,
controls:false,
infiniteLoop:true
});
});
</script>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

参考程度に

No.2ベストアンサー

回答者： fujillin
回答日時：2016/09/28 11:42

ANo1です。

反応がないみたいですけれど、ANo1のような制御部分を作成しちゃうと、フェードで入替える部分を付け足せばbxslider本体を使わなくても良くなりますね。

ごく簡単な例を作成してみましたので、ご参考まで。（jQuery利用）
※ 時間制御の方法はANo1で提示したものと同じ考え方です。
※ スクリプト部のインデントは全角空白になっていますのでご注意。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style type="text/css">
img { width:600px; }
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9. …

<script type="text/javascript">
$(window).on("load", function(){
　var target = ".slider"; // 対象要素のセレクタ
　var speed = 1600; // フェード時間（単位：msec）
　var pause = [1,2,3,4]; // 表示時間（フェード時間を除く）(単位：sec)

　var current = 0, style = { position:"absolute", top:0, left:0 };
　var slider = $(target).css("position", "relative");
　var elms = slider.children().css(style);

　var loop = function(){
　　setTimeout(function(){
　　　elms.eq(current++).fadeOut(speed);
　　　current %= elms.length;
　　　elms.eq(current).fadeIn(speed, loop);
　　} , pause[current] * 1000);
　};

　slider.height(elms.height());
　elms.hide().eq(current).show();
　loop();
});
</script>
</head>

<body>
<ul class="slider">
<li><img src="img/photo01.jpg" alt="" /></li>
<li><img src="img/photo02.jpg" alt="" /></li>
<li><img src="img/photo03.jpg" alt="" /></li>
<li><img src="img/photo04.jpg" alt="" /></li>
</ul>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。

時間をとって考えてみます。

通報する

お礼日時：2016/09/28 12:08

No.1

回答者： fujillin
回答日時：2016/09/27 14:47

こんにちは

bxsliderはたいして知りませんが、ご質問のようなことを想定しているライブラリは稀なのではないでしょうか。
フェードで画像が切り替わる専用なら、自作してしまってもそれほど面倒ではなさそうにも思いますが…

ドキュメントを見る限りでは、bxsliderには公開メソッドがいろいろ用意されているようですので、これを利用することでも実現は可能なように思えます。
http://bxslider.com/options

autoでスライド（=ご質問の例ではフェード）させずに、スクリプトからスライドさせるという考え方で、『お好みの時間制御しながら次のスライドを表示する』という部分だけを作ってあげれば良いのではないでしょうか。

(function loop(){
setTimeout( function(){
slider.goToNextSlide();
loop();
} , [1, 2, 3, 4][slider.getCurrentSlide()]*1000);
})();

みたいな仕組みにしておくことで、実現できませんか？