【FlexSlider 2】一定スピードで横に流れるスライダーを実装する方法

2023-09-29

jQueryのスライダープラグイン「FlexSlider 2」で､一定スピードで横に流れ続けるスライドショーを実装する方法をご紹介します｡

サンプル

こんなのが作れます｡

ただし､PCでウィンドウのフォーカスを外すと止まってしまいます｡その対処法も後述します｡

JS

FlexSliderのオプションに以下を指定します｡

$(".flexslider").flexslider({
	animation: "slide",
	slideshowSpeed: 0, //停止時間を0に
	animationSpeed: 4000, //スピード(お好みで)
	easing: "linear", //必須
	useCSS: false, //必須
	directionNav: false, //左右のボタンをオフに
	pauseOnAction: false, //ホバーで一時停止をオフに
	touch: false //タッチ操作をオフに
});

すると､一定スピードでスライダーが動くようになります｡

上のサンプルのように､左右のスライドをチラ見せする方法は､以下の記事をご覧ください｡

【FlexSlider 2】両サイドのスライドをチラ見せする方法

注意点

最初のサンプルでは､PCでウィンドウのフォーカスを外すと､スライダーが止まってしまうと思います｡

これはFlexSliderの標準仕様のようです｡

参考 : jquery - Flexslider stops working when browser window is off focus - Stack Overflow

これを修正するには､flexslider.jsの1145行目付近

以下の記述をコメントアウトします｡

// Ensure the slider isn't focussed if the window loses focus.
$( window ).blur( function ( e ) {
  focused = false;
}).focus( function ( e ) {
  focused = true;
});

このように

// Ensure the slider isn't focussed if the window loses focus.
//$( window ).blur( function ( e ) {
//  focused = false;
//}).focus( function ( e ) {
//  focused = true;
//});

それを適用したのがこちらなのですが､ウィンドウのフォーカスを外しても停止しなくなりました｡

iframeを正しく読み込めない方はこちら

以上､FlexSliderで一定スピードで横に流れ続けるスライダーの作成方法と注意点でした｡

「できました！」などの報告もお待ちしております｡