COLUMNコラム

画像スライダープラグイン「slick」の使い方

 
Webサイト制作においてスライド表示は欠かせないと言っても過言ではありません。
例えばメインビジュアルやバナーリンクをスライド表示にすることは良くありますよね。
そんなときに便利なのが「slick」というプラグインです。
導入方法や使い方もとても簡単なので、今回はスライダープラグイン「slick」をご紹介します。

1. slickとは

冒頭でも説明した通り、スライダーを作成するプラグインです。

公式HPはこちら

2. slickの使い方 ~導入~

2-1. slickをダウンロードする

公式HPより「get it now」をクリックし、zipファイルをダウンロードします。
ダウンロードしたファイルの内、使用するのは下記の2つです。

・slick > 「slick.css」
・slick > 「slick.min.js

上記2つをcssフォルダ、jsフォルダに格納します。

 

2-2. htmlに記述する

htmlの<head>内に下記記述します。
slickはJQueryで動いているので、JQueryのCDNも忘れずに追記しましょう。

3. スライダーの作成

3-1. 完成サンプル

5枚の画像を使ってスライダーを作成しています。

 

  • 画像1
  • 画像2
  • 画像3
  • 画像4
  • 画像5

 

3-2. htmlを記述する

3-2. cssを記述する

デザインによってcssは変更して下さい。

3-2. JQueryを記述する

4. カスタマイズ方法①

4-1. 完成サンプル

左右にある画像を少し見えるように作成しています。

 

  • 画像1
  • 画像2
  • 画像3
  • 画像4
  • 画像5

4-2. cssを記述する

4-3. JQueryを記述する

5. カスタマイズ方法②

5-1. 完成サンプル

サムネイル付きのスライドショーを作成しています。

 

  • 画像1
  • 画像2
  • 画像3
  • 画像4
  • 画像5
  • 画像1
  • 画像2
  • 画像3
  • 画像4
  • 画像5

5-2. htmlを記述する

5-3. cssを記述する

5-4. JQueryを記述する

おわりに

今回は画像のスライドショー作成に便利な「slick」を紹介しました。
複数の画像を使用したいときに画像を動かせるようになると少しリッチなサイトが作成できます。
手軽に導入できるので、ぜひWebサイト制作にお役立ちいただければ幸いです。

弊社では士業やメディア、医療関係を中心にサイト制作を行っております。webサイトについてお悩みのある方はお気軽にお問い合わせください。




DOLに制作を相談する