【bxSlider】一定スピードで横に流れるスライダーを実装する方法
jQueryのスライダープラグイン「bxSlider」で一定スピードで横に流れ続けるスライドショーを実装する方法をご紹介します｡
サンプル
こんなスライダーが作れます｡
やり方
bxSliderを実行する際､オプション「ticker: true;」を指定するだけ｡ CSSなどは特に追記ありません｡
$("#bxslider").bxSlider({
ticker: true, //一定スピードにするTickerモード
speed: 12000, //スピード (お好みで)
minSlides: 1.5, //左右のスライドチラ見せ (お好みで)
maxSlides: 1.5, //左右のスライドチラ見せ (お好みで)
slideWidth: 640, //スライドの幅 (お好みで)
});bxSlider公式のExamples にも､Tickerモード載ってました｡これと一緒です｡
この例では､左右のスライドをチラ見せするために「minSlides」「maxSlides」を使用してますが
画面幅がスライドの幅を超えた分だけチラ見せ (centerMode的なことに) したいって方は､minSlides・maxSlidesではなく
こちらの記事の方法と併用してください｡
苦戦したこと
「slick」など､他のスライダープラグインでこれをやる場合
このように「pause」で停止時間を0にして､easingを"linear"にすればいいんですよね｡
$("#bxslider").bxSlider({
speed: 3000, //スピード
pause: 0, //スライドの停止時間
easing: "linear", //イージング
auto: true
});で､そのスライダーがこちらなのですが
途中で止まったり､ページが飛んだり､スピードが変わったりします｡
調べたところ､bxSliderは「speed」の値が「pause」の値より大きい時､こういうバグが発生するようです｡
そこで用意されてるのが「ticker」オプション ということですね｡
コメント
「できました！」などの報告もお待ちしております｡
