【jQuery】カルーセルスライダーslickの使い方とサンプル集

どうも、ジャングルオーシャンのミケです。

今日はカルーセルスライダーが実装できるslickのご紹介！

カルーセルスライダーは

ウェブサイトのファーストビューなどでよく使われている

何枚かの画像がスライドしたりして切り替わる機能のことだよ。

slickを使ったサンプルデモを用意したので

具体的なイメージはこちらを見てみてね。

コピペして使ってもらって大丈夫だよ！

サンプルデモページはこちら

もしslickを実装して動かないことがあったりしたらこちらの記事を参考にしてみてね！

slickとは

slickはjQueryのプラグインの一つで

簡単にカルーセルスライダーを実装する事ができるよ。

JavaScriptやjQueryが書けなくても大丈夫なので

カルーセルスライダーの実装を考えている人は

slickも検討してみてね。

slickの使い方

まずはslickの公式サイトにアクセス！

slick公式ページはこちら

まずはナビゲーションの「get it now」をクリックしてね。

下にスクロールするから

「Download Now」ボタンをクリックしてね。

ダウンロードされたzipファイルを解凍してね。

使うファイルは以下のものになるよ。
slick-1.8.1フォルダ　＞　slickフォルダ　＞　slick-theme.css
slick-1.8.1フォルダ　＞　slickフォルダ　＞　slick.css
slick-1.8.1フォルダ　＞　slickフォルダ　＞　slick.min.js
slick-1.8.1フォルダ　＞　slickフォルダ　＞　fontsフォルダ

htmlファイルを作成してそれぞれのファイルを読み込ませるよ。

まず、headタグ内にcssを読み込ませるよ。

次にbodyタグの中にスライダーの枠を記述するよ。

    
your content
    
your content
    
your content

最後にbodyタグの閉じタグの前にscriptを記述してね。

「スライダーのクラス名」には好きなクラスを入れてね。
「オプション」と「値」にはこのページの下の方に書いてあるオプション一覧を参照してね。

1.画像を1枚表示するスライダー

HTML

CSS

.single { max-width: 600px; margin: 0 auto 50px;}
.single img{ width: 100%;}

jQuery

$(document).ready(function(){
  $('.single').slick({
    autoplay: true, //自動再生
  });
});

サンプルデモを見る

2.複数枚の画像を表示するスライダー

HTML

CSS

.multiple { padding: 0;}
.multiple img { width: 100%;}
.multiple div { margin: 0 5px;}
.multiple .slick-next { right: 17px;　z-index: 100;}
.multiple .slick-prev { left: 23px; z-index: 100;}

jQuery

$(document).ready(function(){
  $('.multiple').slick({
    autoplay: true, //自動再生
    infinite: true, //スライドのループ有効化
    dots: true, //ドットのナビゲーションを表示
    slidesToShow: 4, //表示するスライドの数
    slidesToScroll: 4, //スクロールで切り替わるスライドの数
    responsive: [{
      breakpoint: 768, //ブレークポイントが768px
      settings: {
        slidesToShow: 3, //表示するスライドの数
        slidesToScroll: 3, //スクロールで切り替わるスライドの数
      }
    }, {
      breakpoint: 480, //ブレークポイントが480px
      settings: {
        slidesToShow: 2, //表示するスライドの数
        slidesToScroll: 2, //スクロールで切り替わるスライドの数
      }
    }]
  });
});

サンプルデモを見る

3.画像の切り替えをフェードにしたスライダー

HTML

CSS

.fade { max-width: 600px; margin: 0 auto 50px; padding: 0; height: auto;}
.fade img{ width: 100%;}

jQuery

$(document).ready(function(){
$('.fade').slick({
  autoplay: true, //自動再生
  dots: true, //ドットのナビゲーションを表示
  infinite: true, //スライドのループ有効化
  speed: 1000, //切り替えのスピード（小さくすると速くなる）
  fade: true, //フェードの有効化
});
});

サンプルデモを見る

4.サムネイルがついているスライダー

HTML

CSS

.thumbnail { max-width: 700px; margin: 0 auto 5px; padding: 0;}
.thumbnail img,.thumbnail-nav img{ width: 100%;}
.thumbnail-thumb { max-width: 700px; margin: 0 auto;}
.thumbnail-thumb li { margin: 5px;}
.thumbnial-thumb .slick-next { right: 20px; z-index: 100;}
.thumbnail-thumb .slick-prev { left: 15px; z-index: 100;}
.thumbnail-thumb .slick-current { opacity: 0.5;}
.thumbnail-thumb div div div { cursor: pointer;}

jQuery

$(document).ready(function(){
  $('.thumbnail').slick({
    infinite: true, //スライドのループ有効化
    arrows: false, //矢印非表示
    fade: true, //フェードの有効化
    draggable: false //ドラッグ操作の無効化
  });
  $('.thumbnail-thumb').slick({
    infinite: true, //スライドのループ有効化
    slidesToShow: 8, //表示するスライドの数
    focusOnSelect: true, //フォーカスの有効化
    asNavFor: '.thumbnail', //thumbnailクラスのナビゲーション
  });
});

サンプルデモを見る

5.両サイドに画像を表示するスライダー

HTML

CSS

.center { margin: 0 0 50px;}
.center img { width: 100%; height: auto;}
.center .slick-next { right: 20px; z-index: 99;}
.center .slick-prev { left: 15px; z-index: 100;}

jQuery

$(document).ready(function(){
    $('.center').slick({
        infinite: true, //スライドのループ有効化
        dots:true, //ドットのナビゲーションを表示
        centerMode: true, //要素を中央寄せ
        centerPadding:'10%', //両サイドの見えている部分のサイズ
        autoplay:true, //自動再生
    });
});

サンプルデモを見る

6.縦のスライダー

HTML

CSS

.vertical { max-width: 600px; margin: 20px auto;}
.vertical div { width: 100%; line-height: 200px; text-align: center;}
.vertical div img { width: 100%;}
.vertical .slick-prev { left: calc(50% - 10px); top: 10%; transform: rotateZ(90deg);}
.vertical .slick-next { right: calc(50% - 10px); top: 90%; transform: rotateZ(90deg);}

jQuery

$(document).ready(function(){
  $('.vertical').slick({
    autoplay: true, //自動再生
    vertical: true, //縦のスライドを有効化
  });
});

サンプルデモを見る

オプション一覧

ここからは設定できるオプションの一覧を書いていくよ。
さっきも書いたけど

$(document).ready(function(){
      $('スライダーのクラス名').slick({
        オプション: 値
      });
});

このソースコードの中の
オプションと値にそれぞれ入れるようにしてね。

Previous

Next

customPaging: function(slick,index) {
        var dotsNum = index+1
        return ' ' + dotsNum + '';
    }

$('スライダーのクラス名').slick({
    responsive: [{
      breakpoint: 768,
      settings: {
        オプション:値
      }
    }, {
      breakpoint: 480,
      settings: {
        オプション:値
      }
    }]
  });

まとめ

カルーセルスライダーは実装できたかな？

オプションを記入するだけで簡単に実装できるから

まだ試したことのない人はぜひ試してみてね。

もし何かわからないことなどがあったら連絡してね。

それじゃまた今度！

TwitterやFacebookのフォローよろしくね！

Twitter
@michelgorilla

Facebook
ミケランジェロ