株式会社webtechのべーやんこと川邊英之が日々の想いを綴る公式ブログ
WEB
汎用性抜群！レスポンシブ対応のカルーセルスライダーSlick Slider
ECサイトやコーポレートサイトなど様々なホームページの制作業務において、今や欠かせないものがあります。
それがスライダーです。
一昔前までなら、Flashを使用して制作されていましたが、今ではjQueryを使用したモノが主流になっています。
制作する上で、弊社webtechでもいろいろなスライダーを使用してきましたが、今流用しているスライダーは、今回のエントリーのタイトルにも書いていている「Slick Slider」です。
「Slick Slider」の特徴は、やはりレスポンシブに対応していて、スマホ対応を行いやすいという点でしょう。
この「一期一会」のトップのスライダーもこの「Slick Slider」です。
ちなみに、EC-CUBEもデフォルトで採用しているのが、この「Slick Slider」なのです。
使い方は至ってシンプル。
独自にカスタマイズも用意で、CSSのpostionをある程度理解していればデザインの自由度も高く、動きや見せ方についても簡単にオプションを追加する事で選択する事ができます。
今回は、それらをここでご紹介したいと思います。
まずは、「slick配布元」からファイルをダウンロードし、読み込ませます。
|
1 2 3 4 |
<link rel="stylesheet" type="text/css" href="slick.css" media="screen" /> <link rel="stylesheet" type="text/css" href="slick-theme.css" media="screen" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="slick.min.js"></script> |
上記のように読み込ませたら、お次はHTMLです。
スライダーさせる部分のHTMLを下記のように記述してください。
|
1 2 3 4 5 6 |
<ul class="slider"> <li><a href="#"><img src="../images/hoge.jpg"></a></li> <li><a href="#"><img src="../images/hoge.jpg"></a></li> <li><a href="#"><img src="../images/hoge.jpg"></a></li> <li><a href="#"><img src="../images/hoge.jpg"></a></li> </ul> |
お次にCSSの記述です。
最初に読み込ませたCSSに更に追加しても構いませんが、編集しやすいように独自のCSSファイルに記述する事をオススメします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
/*左右の矢印の色を変える*/ .slick-prev:before, .slick-next:before { color: #000; } /*左右の矢印の位置を変える*/ .slick-next { right: 20px; z-index: 99; } .slick-prev { left: 15px; z-index: 100; } /*スライド数のドットの色を変える*/ .slick-dots li.slick-active button:before, .slick-dots li button:before { color: #fff; } /*スライド画像の横幅可変*/ img { max-width: 100%; height: auto; } |
さて、いよいよここからが本番です！
以下のように、様々なスライダーを設定する事ができます。
画像単体のスライダー
上記の画像のようなスライダーの場合は、下記のコードをjQueryに新規で記述してください。
|
1 |
$('.single-item').slick(); |
画像複数のスライダー
上記のように前後の画像が見えている状態のスライダーを作成する場合は、下記のコードをjQueryに新規で記述してください。
|
1 2 3 4 5 |
$('.multiple-items').slick({ infinite: true, slidesToShow: 3, slidesToScroll: 3 }); |
自動再生のスライダー
自動でスライドするスライダーの作成に関しては、下記のコードをjQueryに新規で記述してください。
|
1 2 3 4 5 6 |
$('.autoplay').slick({ slidesToShow: 3, slidesToScroll: 1, autoplay: true, autoplaySpeed: 2000, }); |
フェードのスライダー
スライドだけでなく、フェードさせる事も可能です。その場合は、下記のコードをjQueryに新規で記述してください。
|
1 2 3 4 5 6 7 |
$('.fade').slick({ dots: true, infinite: true, speed: 500, fade: true, cssEase: 'linear' }); |
上記以外にも様々な設定が可能です。
その場合は、「コチラ」を参照してください。
是非、いろんなバリエーションを楽しんでみてくださいねー！
