slick（スリック）とは
slickはjQueryベースの、スライダーを作成するためのプラグインです。
レスポンシブにも対応し、カスタマイズの幅も広いため、世界的に利用されています。
ファイルのダウンロード
公式サイト：slickよりファイルをダウンロードする。
get it now ボタンを押下で、ページの下の方に移動。
そこにDownload Now ボタンがあるので押下して、ファイルのダウンロードを実行。
必要なファイルを任意のフォルダに設置する
slick.css
slick-theme.css
slick.js
上記3つのファイルが必要です。任意のフォルダ設置してください。
ファイルを読み込む
<link rel="stylesheet" type="text/css" href="slick.css"/>
<link rel="stylesheet" type="text/css" href="slick-theme.css"/>
<script src='jquery.js'></script>
<script src="modaal.js"></script>
slick.css、slick.jsの他に、jQueryのファイルも読んでおいてください。
JavaScript・HTMLにmodaal.jsを動かすコードを記述
一番基本的でシンプルな、１枚の画像が表示されていて、左右に矢印、あるスライダーの作り方です。
左右の矢印をクリックすると画像が前後に切り替わります。
HTML
<div class="slider flex">
<div><img src="img/難波.jpg" alt="難波" /></div>
<div><img src="img/渋谷.jpg" alt="渋谷" /></div>
<div><img src="img/横浜.jpg" alt="横浜" /></div>
<div><img src="img/東山.jpg" alt="東山" /></div>
<div><img src="img/博多.jpg" alt="博多" /></div>
<div><img src="img/花園.jpg" alt="花園" /></div>
<div><img src="img/祇園.jpg" alt="祇園" /></div>
<div><img src="img/吉祥寺.jpg" alt="吉祥寺" /></div>
<div><img src="img/秋葉原.jpg" alt="秋葉原" /></div>
<div><img src="img/新宿.jpg" alt="新宿" /></div>
<div><img src="img/川越.jpg" alt="川越" /></div>
<div><img src="img/池袋.jpg" alt="池袋" /></div>
<div><img src="img/天王寺.jpg" alt="天王寺" /></div>
<div><img src="img/梅田.jpg" alt="梅田" /></div>
<div><img src="img/伏見稲荷.jpg" alt="伏見稲荷" /></div>
</div>
JavaScript
$('.slider').slick();
たったこのコードだけでスライダーが実装されます。
slickのオプションを使ってカスタマイズ
$('.slider').slick({
infinite: true, //無限にスライドする
autoplay: true, //trueの場合、自動再生する
arrow: true, //左右矢印を表示する
slidesToShow: 3, //スライダーの表示数
slidesToScroll: 1, //一度にスライドする数
autoplaySpeed: 4000, //自動再生時のスライド切り替えのスピード
centerMode: true, //センターモード（＝両端見切れ状態）になる
centerPadding: "-10%", //センターモード時、見切れたコンテンツの幅をpx指定
prevArrow: '<i class="prev-arrow fas fa-chevron-left"></i>', //前矢印のHTMLカスタマイズ
nextArrow: '<i class="next-arrow fas fa-chevron-right"></i>', //後矢印のHTMLカスタマイズ
});
オプションにつきましては、こちらに分かり易くまとめて下さっているのでご参考下さい。
スライダープラグイン「Slick」便利なオプション&動きサンプル集
レスポンシブの設定方法
$(".slider-works").slick({
~~ 中略 ~~
responsive: [
{
breakpoint: 1024, //ブレイクポイントの指定
settings: {
infinite: true,
autoplay: true,
arrow: true,
slidesToShow: 2,
slidesToScroll: 1,
autoplaySpeed: 4000,
prevArrow: '<i class="prev-arrow fas fa-chevron-left"></i>',
nextArrow: '<i class="next-arrow fas fa-chevron-right"></i>',
},
},
{
breakpoint: 600,
settings: {
~~ 中略 ~~
},
},
],
});
上記を追記してあげるだけで簡単にレスポンシブが可能になります。
必要に応じてスライダーの表示数や一度にスライドする数を記述すれば大丈夫です。
まとめ
オプションとイベントを使えればかなりカスタマイズの幅が広がります。
是非、「slick」を活用して動きのあるWeb制作をしてみて下さい。
↧