【slick.js】中央のスライドが拡大するスライダーの実装

概要

用途・要件

• 中央のスライドを拡大するスライダーをslick.jsで実装。
• 実際は中央スライド以外をtransform: scale();で縮小することで、中央が拡大しているように見せている。
• centerModeを使用。
• 2周目に入るとガタつく現象を解消。
• SP時は、スライド1枚表示で左右に画像は見えない設定。
• スライドは複数枚を想定。
• 中央以外のスライドを透過にするなど、応用可能。

検証ブラウザ

• Google Chrome(最新)
• Safari(最新)
• Firefox(最新)
• Microsoft Edge(最新)
• IE11

その他

• jQuery v3.6.0使用。
• slick.js v1.8.1使用。

実装