定番スライダー&カルーセルのプラグインを比較とちょっとしたカスタマイズ

スライダーとカルーセルの違い

スライダーが1つ1つ画像(要素)を遷移するのに対し、まとまった画像で遷移するものをカルーセルとします。



Slick.js

BxSliderとFlexSliderに比べ知名度は低いですが、豊富なオプション、機能があるスライダー。
MITライセンス

カスタマイズ

・全画面表示+無限で右側のカルーセルが遅れて表示される問題を解消します。
.slick-list { /* overflow:hidden; */}とすることで前後のカルーセルが表示される状態になります。

slick.jsのカルーセルの動きは以下のようになっています。

( 789/123/456 ) 789/123
789 ( 123/456/789 ) 123
789 123 ( 456/789/123 )
789 123 456 ( 789/123/空白 )
( 789/123/456 ) 789/123

よって、空白の箇所に456を追加すれば表示が途切れることはありません。
setUpInfinite()の2032行目のfor文内の条件を以下のように変更します。

Slick.prototype.setupInfinite = function() {
	for (i = 0; i < infiniteCount +  _.options.slidesToShow; i += 1) {
	}
}

以上です。遷移がおかしくなりそうですが、以降の処理がうまくやってくれます。

FlexSlider

カルーセルの無限ループなし

カスタマイズ

ボタンクリックで指定した位置に遷移する。

BxSlider

カルーセルの無限ループあり

スポンサーリンク
RESAD
RESAD

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
RESAD