一期一会 株式会社webtech 執行役員 川邊英之の公式ブログ

株式会社webtechのべーやんこと川邊英之が日々の想いを綴る公式ブログ

Slick Slider

汎用性抜群!レスポンシブ対応のカルーセルスライダーSlick Slider

ECサイトやコーポレートサイトなど様々なホームページの制作業務において、今や欠かせないものがあります。
それがスライダーです。
一昔前までなら、Flashを使用して制作されていましたが、今ではjQueryを使用したモノが主流になっています。

制作する上で、弊社webtechでもいろいろなスライダーを使用してきましたが、今流用しているスライダーは、今回のエントリーのタイトルにも書いていている「Slick Slider」です。
Slick Slider」の特徴は、やはりレスポンシブに対応していて、スマホ対応を行いやすいという点でしょう。
この「一期一会」のトップのスライダーもこの「Slick Slider」です。
ちなみに、EC-CUBEもデフォルトで採用しているのが、この「Slick Slider」なのです。

使い方は至ってシンプル。
独自にカスタマイズも用意で、CSSのpostionをある程度理解していればデザインの自由度も高く、動きや見せ方についても簡単にオプションを追加する事で選択する事ができます。
今回は、それらをここでご紹介したいと思います。

まずは、「slick配布元」からファイルをダウンロードし、読み込ませます。

上記のように読み込ませたら、お次はHTMLです。
スライダーさせる部分のHTMLを下記のように記述してください。

お次にCSSの記述です。
最初に読み込ませたCSSに更に追加しても構いませんが、編集しやすいように独自のCSSファイルに記述する事をオススメします。

さて、いよいよここからが本番です!
以下のように、様々なスライダーを設定する事ができます。

Slick Slider 画像単体のスライダー

画像単体のスライダー
上記の画像のようなスライダーの場合は、下記のコードをjQueryに新規で記述してください。

Slick Slider 画像複数のスライダー

画像複数のスライダー
上記のように前後の画像が見えている状態のスライダーを作成する場合は、下記のコードをjQueryに新規で記述してください。

Slick Slider auto play

自動再生のスライダー
自動でスライドするスライダーの作成に関しては、下記のコードをjQueryに新規で記述してください。

slick Fade

フェードのスライダー
スライドだけでなく、フェードさせる事も可能です。その場合は、下記のコードをjQueryに新規で記述してください。

上記以外にも様々な設定が可能です。
その場合は、「コチラ」を参照してください。
是非、いろんなバリエーションを楽しんでみてくださいねー!

NEWS

政治経済芸能など様々な時事ネタを取り上げたカテゴリ

記事一覧

WEB

webtechが制作したホームページや制作時に苦労した内容を記述するカテゴリ

記事一覧

FASHION

実際に自分が購入したアイテムや注目しているアイテムを紹介するカテゴリ

記事一覧

NOTES

プライベートな内容を雑記的に記述したカテゴリ

記事一覧