jQueryプラグインのslickを試してみる

JavaScript

jQueryプラグインのslickを試してみる。

slick - the last carousel you'll ever need
http://kenwheeler.github.io/slick/

※今回はバージョン1.3.15を使用。

設置

ファイルを下記のような感じで設置。

├ HTMLファイル
├ fonts
│├ slick.eot
│├ slick.svg
│├ slick.ttf
│└ slick.woff
├ img
│├ 001.png
│├ 002.png
│└ ・・・
├ slick.css
â”” slick.min.js

基本

基本的には下記のような感じでHTMLを書く。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link href="slick.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="slick.min.js"></script>
<script>
  $(function(){
    $('.slides').slick({
      dots: true
    });
  });
</script>
</head>
<body>
  <div class="slides">
    <div><img src="img/001.png" /></div>
    <div><img src="img/002.png" /></div>
    <div><img src="img/003.png" /></div>
    <div><img src="img/004.png" /></div>
    <div><img src="img/005.png" /></div>
    <div><img src="img/006.png" /></div>
    <div><img src="img/007.png" /></div>
    <div><img src="img/008.png" /></div>
    <div><img src="img/009.png" /></div>
    <div><img src="img/010.png" /></div>
  </div>
</body>
</html>

デモ

カルーセル

スライドの数を指定するとカルーセルな感じになる。

    $('.slides').slick({
      dots: true,
      slidesToShow: 3,
      slidesToScroll: 3
    });

デモ

センタリング

centerModeをtrueにすると、画像をセンターにもってこれる。

    $('.slides').slick({
      dots: true,
      slidesToShow: 3,
      centerMode: true
    });

デモ

サムネイル

サムネイル付きにする場合は、下記のような感じ。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link href="slick.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="slick.min.js"></script>
<script>
  $(function(){
    $('.slides').slick({
      fade: true,
      asNavFor: '.slider-nav'
    });
    $('.slides-nav').slick({
      dots: true,
      slidesToShow: 5,
      centerMode: true,
      focusOnSelect: true,
      asNavFor: '.slides',
    });
  });
</script>
</head>
<body>
  <div class="slides">
    <div><img src="img/001.png" /></div>
    <div><img src="img/002.png" /></div>
    <div><img src="img/003.png" /></div>
    <div><img src="img/004.png" /></div>
    <div><img src="img/005.png" /></div>
    <div><img src="img/006.png" /></div>
    <div><img src="img/007.png" /></div>
    <div><img src="img/008.png" /></div>
    <div><img src="img/009.png" /></div>
    <div><img src="img/010.png" /></div>
  </div>
  <div class="slides-nav">
    <div><img src="img/001.png" width="200" /></div>
    <div><img src="img/002.png" width="200" /></div>
    <div><img src="img/003.png" width="200" /></div>
    <div><img src="img/004.png" width="200" /></div>
    <div><img src="img/005.png" width="200" /></div>
    <div><img src="img/006.png" width="200" /></div>
    <div><img src="img/007.png" width="200" /></div>
    <div><img src="img/008.png" width="200" /></div>
    <div><img src="img/009.png" width="200" /></div>
    <div><img src="img/010.png" width="200" /></div>
  </div>
</body>
</html>

デモ