Written by Kasumi

【おすすめスライダー】slickslider(スリックスライダー)を使って色々なスライダーを作ってみました。

サイトにスライダーを入れたいけど簡単に入れる方法とかないの?
色々カスタマイズ機能がついていると良い!

このような疑問に答えます!

本記事では導入簡単、カスタマイズも豊富のslickslider(スリックスライダー)の導入方法、コードペンでの様々な実装サンプルを紹介します。

まずは導入準備から!headにCDNを読み込もう

まずは導入準備として上記CDNをhead内に読み込ませましょう!
直接ソースをダウンロードしたい方は下記リンクよりお願いします!
https://kenwheeler.github.io/slick/
以下よりコードペンを用いて実装サンプルを紹介していきます。

コードペンJSタブに書いてあるソースがslickの実行関数です。
PCとスマホで実行処理を分けているので見せ方を変える場合に便利です。

実装サンプル①

See the Pen slickslider01 by Kohei (@kouk05) on CodePen.0

ページネーション、矢印付きのシンプルなスライダーです。

実装サンプル②

See the Pen slickslider02 by Kohei (@kouk05) on CodePen.0

前後のslide要素を少し見せるスライダーです。

実装サンプル③

See the Pen slickslider03 by Kohei (@kouk05) on CodePen.0

サムネイル付きスライダーです。

目次

関連記事

slick

【簡単】slickを使い左右チラ見せ中央固定のカルーセルスライダーを実装する方法

更新日:2022.11.25
2578
slick

【jQuery】slickで現在のスライド番号と総数を表示する方法

更新日:2022.11.25
623
slick

【簡単】slickスライダーでサムネイルを連動・固定2列2段以上で表示させる方法

更新日:2022.11.25
3827
slick

【簡単】slickスライダーで一瞬縦並びになり崩れた表示になるのを対処する方法

更新日:2022.11.25
2741