slickは、カルーセルやフェードによるスライドが行えるjQueryプラグインです。レスポンシブにも対応しており、実装も簡単かつカスタマイズも柔軟で。採用することの多いメジャーなスライダープラグインです。

以下にその基本的な実装方法、使い方をまとめます。

公式サイトからプラグインをダウンロードする

まずは公式サイトからプラグインファイル一式をダウンロードしてきましょう。

ファイルを読み込む

head内に専用のcss(slick.cssとslick-theme.css)を、footerでjQueryライブラリとslick.jsを読み込みます。

// head内で読み込むファイルは2つ
<link rel="stylesheet" type="text/css" href="slick.css">
<link rel="stylesheet" type="text/css" href="slick-theme.css">

// bodyの閉じタグ直前あたりで以下スクリプトファイルを読み込む
<script type="text/javascript" src="jquery.min.js"  ></script>
<script type="text/javascript" src="slick.min.js"></script>

コードを記述

スライドさせる画像を囲うボックスと画像群をセットします。

<div class="slider">
  <div><img src="画像URL"></div>
  <div><img src="画像URL"></div>
  <div><img src="画像URL"></div>
</div>

スクリプトを記述

基本的な書き方は以下の通り。autoplay、autospeedはオプションと呼ばれる、スライダーのUIや動き方を決める設定値。詳細は次に記載してあります。

<script>
$("document").ready(function(){
  $('.slider').slick({
    autoplay: true,
    autoplaySpeed: 2000,
    speed: 800,
    dots: true,
    arrows: false
  });
}); 
</script>

オプションについて

slickには、以下のようにスライド設定を変更する項目が予め用意されています。以下の項目を設定することで、たとえばスライドが1周したら終わるのか、また1からリピートさせるのか、スライド間隔は何秒にするのか、などを簡単に設定可能です。

オプション名概要
accessibility
adaptiveHeight
autoplay
autoplaySpeed
arrows
asNavFor
appendArrows
appendDots
prevArrow
nextArrow
centerMode
centerPadding
cssEase
dots
customPaging
dotsClass
draggable
fade
focusOnSelect
easing
infinite
edgeFriction
initialSlide
lazyLoad
mobileFirst
pauseOnFocus
pauseOnHover
pauseOnDotsHover
respondTo
responsive
rows
slide
slidesPerRow
slidesToShow
slidesToScroll
speed
swipe
swipeToSlide
touchMove
touchThreshold
useCSS
useTransform
variableWidth
vertical
verticalSwiping
rtl
waitForAnimate
zIndex