slickスライダー実装まとめ16選【サンプル付き】

slickってどんなスライダーが出来るの？

スライダーで有名なプラグイン、slickにはオプションを使って色々なスライダーを実装することが出来ます。

実務でも色々なタイプのスライダーを実装することになるので、どんなタイプのスライダーも実装出来るようにしておきましょう。

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

• 30日間でWeb制作を学べる
• 完全無料
• 現役エンジニアへの質問無制限
• オンラインの動画学習なので時間場所を問わず勉強可能
• 最大4回の学習サポート面談
• 受付は1日25名までの先着制

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

＼ 完全無料 ／

ZeroPlus Gate公式サイト

先着1日25名まで！

slickスライダー実装まとめ16選

今回はslickを使ったスライダーの実装集となります。

コードについてはデモのHTML、CSS、JSをクリックすれば確認出来るので、コピペしてお使い下さい。

またスライダーをリロードしたい時はデモの右下にあるRerunをクリックすればOKです。

slickの基本的な使い方と、slickを使うのに必要なjQueryの使い方については以下の記事を参照下さい。

またslickには色々カスタマイズが出来るオプションがあるので、そちらも合わせて活用すると実装出来るスライダーの幅が広がります。

1枚表示（スライド）

See the Pen
slick（1枚基本形） by junpei (@junpei-sugiyama)
on CodePen.

1枚表示（フェード）

See the Pen
by junpei (@junpei-sugiyama)
on CodePen.

2枚表示

See the Pen
by junpei (@junpei-sugiyama)
on CodePen.

無限ループスライダー

無限ループスライダー（右から左）

See the Pen
無限ループスライダー by junpei (@junpei-sugiyama)
on CodePen.

無限ループスライダー：逆方向（左から右）

See the Pen
無限ループスライダー（逆向き） by junpei (@junpei-sugiyama)
on CodePen.

縦方向（垂直）スライダー

See the Pen
PobJgpN by junpei (@junpei-sugiyama)
on CodePen.

画像のスライドはこちら。

See the Pen
by junpei (@junpei-sugiyama)
on CodePen.

縦方向（垂直）スライダー（センターモード）

See the Pen
by junpei (@junpei-sugiyama)
on CodePen.

前後の矢印をカスタマイズ

See the Pen
slick矢印の変更（CSS） by junpei (@junpei-sugiyama)
on CodePen.

ドットインジケーターをカスタマイズ

See the Pen
slickドットインジケーター（カスタマイズ） by junpei (@junpei-sugiyama)
on CodePen.

左右が少し見えているスライダー

中央に1枚

See the Pen
slick（左右に少しだけ見えているスライダー：1枚） by junpei (@junpei-sugiyama)
on CodePen.

中央に3枚

See the Pen
slick（左右に少しだけ見えているスライダー：3枚） by junpei (@junpei-sugiyama)
on CodePen.

PCは3枚、指定したブレイクポイントで1枚に変更

See the Pen
slick（レスポンシブ） by junpei (@junpei-sugiyama)
on CodePen.

スマホ時にはスライダー無効

例）画面幅500px以下になったらスライダー無効

See the Pen
by junpei (@junpei-sugiyama)
on CodePen.

スライドの総数と現在のスライドが何番目か表示

See the Pen
by junpei (@junpei-sugiyama)
on CodePen.

中央だけ大きくする

See the Pen
by junpei (@junpei-sugiyama)
on CodePen.

サムネイルクリックでスライド切り替え

基本形（スライド）

See the Pen
slick（サムネイル：） by junpei (@junpei-sugiyama)
on CodePen.

基本形（フェード）

See the Pen
by junpei (@junpei-sugiyama)
on CodePen.

サムネイル固定

See the Pen
by junpei (@junpei-sugiyama)
on CodePen.

サムネイル固定（2行）

See the Pen
slick（サムネイル固定：2列） by junpei (@junpei-sugiyama)
on CodePen.

特定のスライドだけ表示時間変更

See the Pen
slick（時間調整） by junpei (@junpei-sugiyama)
on CodePen.

ズーム（拡大）しながらフェードで切り替える方法

See the Pen
slick（拡大しながらフェード） by junpei (@junpei-sugiyama)
on CodePen.

まとめ

今回はslickの実装集をご紹介しました。

冒頭にも書きましたが、オプションを使えばスライドの枚数を変えたり、スピードを変えたり色々とカスタマイズが可能です。

また今後追加していくかも知れません。

以上になります。

関連記事slick記事一覧
関連記事Swiper記事一覧
関連記事Splide記事一覧

この記事が役に立ったと思ったら、シェアボタンからX（旧Twitter）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！