[2017.07.28] サムネイル画像とカルーセルの画像を変更しました。やっぱり猫はとてもとてもカワイイ。
slick.jsを使ってよくあるカルーセルを実装する方法をまとめておきます。スマホのスワイプなどにも対応しています。
1.slick.jsを使う準備をする
1.必要なファイルをDL
まず、公式サイトから必要なファイルをDLします。
slick(公式サイト)
DLしたフォルダを解凍し、slickフォルダの中にある次のファイル等をサーバーにUPします。
※この時、各ファイルの階層を変えてしまうと、後でパスの書き換えが必要となるところが出てくるので、不要なファイルのみ削除した状態のslickフォルダをそのままサーバーに上げる方が後々楽だと思います。
- fontsフォルダ
- ajax-loader.gif
- slick.css
- slick-theme.css
- slick.min.js
2.ファイルを読み込む
必要なファイルを読み込みます。
|
1 2 3 4 |
<link rel="stylesheet" href="slick/slick.css"> <link rel="stylesheet" href="slick/slick-theme.css"> <script src="//code.jquery.com/jquery-2.2.0.min.js"></script> <script src="slick/slick.min.js"></script> |
2.基本のカルーセルの作り方
まず、DEMOのような一つのスライドを表示させる、基本のカルーセルの作り方を記載しておきます。
DEMO
1.カルーセル用のdivを用意
|
1 2 3 4 5 6 |
<div class="slider"> <div><a href="#"><img src="img/slider-img1.jpg" alt=""></a></div> <div><a href="#"><img src="img/slider-img2.jpg" alt=""></a></div> <div><a href="#"><img src="img/slider-img3.jpg" alt=""></a></div> <div><a href="#"><img src="img/slider-img4.jpg" alt=""></a></div> </div> |
- ※class名「slider」は任意のもので構いませんが、後で記述するslick.jsを実行するjQueryのセレクタと合わせてください。
- ※画像名は任意で構いません。
- ※タグはdiv以外でも大丈夫なそうですが、親要素の直下に自動でdivタグやbuttonタグが入るので、ulじゃない方がいいと思います。ただ、タグはオプションで変えられるようです。
2.slick.jsを実行する
jsファイルを用意して、slick.jsを実行させます。この時のセレクタは先程指定したclass名にしてください。
|
1 2 3 4 5 6 |
$(function() { $('.slider').slick({ autoplay: true,//自動再生 dots: true,//ナビゲーションドット }); }); |
※自動再生あり、ナビゲーションありのオプションをつけています。必要なければ削除。
3.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 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
/* ============================== カルーセル ============================== */ /* slickの初期化完了まで非表示 */ .slider { display:none; } .slider.slick-initialized { display: block; } /* カルーセル画像 */ .slider img { width: 100%; height: auto; } /* NEXTボタン・PREVボタン */ .slick-prev, .slick-next { width: 30px; height: 80px; z-index: 1; } .slick-next { right: 20px; } .slick-prev { left: 20px; } .slick-prev:before, .slick-next:before { font: normal normal normal 80px/1 FontAwesome; } .slick-prev:before { content: "\f104"; } .slick-next:before { content: "\f105"; } /*スライド数のドットの色を変える*/ .slick-dots li.slick-active button:before, .slick-dots li button:before { color: #555; } |
- ※NEXTボタン・PREVボタンをデフォルトからFont AwesomeのWEBアイコンに変更しています。
- ※「slickの初期化完了まで非表示」は初期化が完了するまで、一瞬表示が乱れるのを隠すためです。
3.左右が少し見えるカルーセルの作り方
左右のスライドが少し見えているタイプのカルーセルです。
左右のスライドの表示幅は、jQueryで指定する中央スライドのパディングで決まりまるようです。
ブラウザサイズを大きくした時に中央のスライドの幅と高さを固定したまま左右のスライドを広げていく方法が分かりませんでした。できるのかな…？
DEMO
1.カルーセル用のdivを用意
これは2章の時と同じです。
2.slick.jsを実行する
jsファイルを用意して、slick.jsを実行させます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$(function() { $('.slider').slick({ autoplay: true,//自動再生 dots: true,//ナビゲーションドット centerMode: true,//中央寄せ centerPadding: '4%',//中央寄せにした時の左右のパディング slidesToShow: 1,//表示するスライドの数 responsive: [//レスポンシブ設定 { breakpoint: 1201,//ブレイクポイント settings: { centerMode: false,//中央寄せ解除 } } ] }); }); |
3.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 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
/* ============================== カルーセル ============================== */ /* 僅かに出る横スクロールを直せないので */ .sliderbox { overflow: hidden; } /* slickの初期化完了まで非表示 */ .slider { display:none; } .slider.slick-initialized { display: block; } /* カルーセル画像 */ .slider img { width: 100%; height: auto; } /* スライド間の余白 */ .slider .slick-slide a { display: block; margin: 0 10px; } @media only screen and (max-width: 1200px){ .slider .slick-slide a { margin: 0; } } /* NEXTボタン・PREVボタン */ .slick-prev, .slick-next { width: 30px; height: 80px; z-index: 1; } .slick-next { right: -webkit-calc(4% + 20px); right: calc(4% + 20px); } .slick-prev { left: -webkit-calc(4% + 20px); left: calc(4% + 20px); } @media only screen and (max-width: 1200px){ .slick-next { right: 20px; } .slick-prev { left: 20px; } } .slick-prev:before, .slick-next:before { font: normal normal normal 80px/1 FontAwesome; } .slick-prev:before { content: "\f104"; } .slick-next:before { content: "\f105"; } /*スライド数のドットの色を変える*/ .slick-dots li.slick-active button:before, .slick-dots li button:before { color: #555; } |
4.サムネイルを持つカルーセルの作り方
サムネイルと連動するタイプのカルーセルです。
DEMO
1.カルーセル用のdivを用意
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="slider"> <div><a href="#"><img src="img/slider-img1.jpg" alt=""></a></div> <div><a href="#"><img src="img/slider-img2.jpg" alt=""></a></div> <div><a href="#"><img src="img/slider-img3.jpg" alt=""></a></div> <div><a href="#"><img src="img/slider-img4.jpg" alt=""></a></div> </div> <div class="slider-thumb"> <div><a href="#"><img src="img/slider-img1.jpg" alt=""></a></div> <div><a href="#"><img src="img/slider-img2.jpg" alt=""></a></div> <div><a href="#"><img src="img/slider-img3.jpg" alt=""></a></div> <div><a href="#"><img src="img/slider-img4.jpg" alt=""></a></div> </div> |
※サムネイルとカルーセル本体の画像は同じものでも構いません。
2.slick.jsを実行する
jsファイルを用意して、slick.jsを実行させます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$(function() { $('.slider').slick({ autoplay: true, slidesToShow: 1,//表示するスライドの数 slidesToScroll: 1,//スライドさせる数 arrows: false,//NEXTボタン・PREVボタン fade: true,//フェードイン表示 asNavFor: '.slider-thumb'//サムネイルのclass名 }); $('.slider-thumb').slick({ slidesToShow: 3,//表示するスライドの数 slidesToScroll: 1,//スライドさせる数 asNavFor: '.slider', //カルーセル本体のclass名 centerMode: true,//中央寄せ centerPadding: '100px',//中央寄せにした時の左右のパディング focusOnSelect: true,//サムネイルをクリックさせて表示を切り替える }); }); |
3.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 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
/* ============================== カルーセル ============================== */ /* 僅かに出る横スクロールを直せないので */ .sliderbox { overflow: hidden; } /* slickの初期化完了まで非表示 */ .slider, .slider-thumb { display:none; } .slider.slick-initialized, .slider-thumb.slick-initialized { display: block; } /* カルーセル画像 */ .slider img { width: 100%; height: auto; } /* サムネイル */ .slider-thumb { max-width: 1200px; margin-right: auto; margin-left: auto; } .slider-thumb img { width: 100%; height: auto; } .slider-thumb .slick-slide a { display: block; margin: 20px 5px; } .slider-thumb .slick-prev, .slider-thumb .slick-next { z-index: 1; width: 30px; height: 30px; } .slider-thumb .slick-next { right: 30px; } .slider-thumb .slick-prev { left: 30px; } .slider-thumb .slick-prev:before, .slider-thumb .slick-next:before { font-size: 30px; } |
5.複数アイテムのカルーセルの作り方
アイキャッチ以外でなら、こんなのもよく使われますよね。
DEMO
1.カルーセル用のdivを用意
これも2章の時と同じです。
2.slick.jsを実行する
jsファイルを用意して、slick.jsを実行させます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
$(function() { $('.slider').slick({ dots: false,//ナビゲーションドット infinite: true,//ループ speed: 300,//アニメーション速度 slidesToShow: 3,//表示するスライドの数 slidesToScroll: 1,//スライドさせる数 responsive: [ { breakpoint: 881,//ブレイクポイント settings: { slidesToShow: 2,//表示するスライドの数 } }, { breakpoint: 641,//ブレイクポイント settings: { slidesToShow: 1,//表示するスライドの数 } } ] }); }); |
3.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 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
/* ============================== カルーセル ============================== */ .sliderbox { overflow: hidden; padding: 40px 60px; } .slider { max-width: 1200px; margin-left: auto; margin-right: auto; } /* slickの初期化完了まで非表示 */ .slider { display:none; } .slider.slick-initialized { display: block; } /* カルーセル画像 */ .slider img { width: 100%; height: auto; } /* スライド間の余白 */ .slider .slick-slide a { display: block; margin: 0 10px; } /* NEXTボタン・PREVボタン */ .slider .slick-prev, .slider .slick-next { z-index: 1; width: 30px; height: 30px; } .slider .slick-next { right: -40px; } .slider .slick-prev { left: -40px; } .slider .slick-prev:before, .slider .slick-next:before { font-size: 30px; color: #555; } |
6.slick.jsのオプション設定
たくさんあるので、よく使いそうなものだけ。
詳しくはこちらで紹介されています。
どこよりも詳しい万能スライダーjQueryプラグインslick.jsの使い方 | ITハット
まず、設定方法はこんな感じです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
$(function() { $('.slider').slick({ dots: true,//ナビゲーションドット speed: 300,//アニメーション速度 responsive: [//レスポンシブ設定 { breakpoint: 881,//ブレイクポイント settings: { dots: false,//ナビゲーションドット } }, { breakpoint: 641,//ブレイクポイント settings: { dots: false,//ナビゲーションドット } } ] }); }); |
オプションの種類(一部)
そして設定できるオプションはこんな感じ。
自動再生に関するオプション
- 自動再生(※初期値：false)
- autoplay: true,
- 自動再生でスライドが移動する時間(※初期値：3000)
- autoplaySpeed: 4000,
- autoplayがtrueの時、マウスフォーカスで一時停止(※初期値：true)
- pauseOnFocus: false,
- autoplayがtrueの時、マウスホバーで一時停止(※初期値：true)
- pauseOnHover: false,
- autoplayがtrueの時、ドットナビのマウスホバーで一時停止(※初期値：false)
- pauseOnDotsHover: true,
ドットナビに関するオプション
- ドットナビの表示(※初期値：false)
- dots: true,
- ドットナビのclass名(※初期値：slick-dots)
- dotsClass: ‘carousel-nav’,
PREVボタン・NEXTボタンに関するオプション
- PREVボタン・NEXTボタンの表示(※初期値：true)
- arrows: false,
- PREVボタンの挿入コード(※初期値：'<button type=”button” class=”slick-prev”>Previous</button>’)
- prevArrow: ‘<a href=”#” class=”prevbtn”>PREV</a>’,
- NEXTボタンの挿入コード(※初期値：'<button type=”button” class=”slick-next”>Next</button>’)
- nextArrow: ‘<a class=”slick-next” href=”#”>次へ</a>’,
アニメーションに関するオプション
- スライドアニメーションのスピード(※初期値：300)
- speed: 400,
- スライド時のアニメーションをフェード(※初期値：false)
- fade: true,
その他のオプション
- ループ(※初期値：true)
- infinite: false,
- スライド幅を固定(※初期値：false)
- variableWidth: true,
- 表示させるスライドの数(※初期値：1)
- slidesToShow: 3,
- 最初のスライドをどれにするか(※初期値：0)
- initialSlide: 2,
- 一度にスライドさせる数(※初期値：1)
- slidesToScroll: 3,
- slidesToShowが奇数の時、アクティブなスライドを中央表示(※初期値：false)
- centerMode: true,
- centerModeがtrueの時のアクティブなスライドの左右パディング(※初期値：’50px’)
- centerPadding: ‘100px’,
※左右のスライドを少し見せたい時はこの値で幅を調整する
- マウスドラッグでのスライド(※初期値：true)
- draggable: false,
- スワイプでのスライド(※初期値：true)
- swipe: false,