レスポンシブにも対応。とっても使いやすい jQueryスライダープラグイン【Slick】

Webデザイン マークアップ

2016.11.11(Fri)

こんにちは。ディレクターの渡邊です。

ディレクターと言いつつも元マークアップエンジニアなので、暇を見つけては家でちまちまコードをいじっています。
で、何年か前から使っていたのですがスライダー系プラグインならこれが一番使いやすいと改めて思った【Slick】を紹介します。

コラム画像01

http://kenwheeler.github.io/slick/

なぜイイのか?

では一体何がいいのか、簡単に言いますと…

  • カスタマイズがしやすい
  • オプションが豊富
  • レスポンシブ対応である

要は“使いやすい”ということです。

使い方は本当に簡単!

まずは css/js を読み込みます。

<link rel="stylesheet" href="css/slick.css">
<link rel="stylesheet" href="css/slick-theme.css">
<script src="js/slick.min.js"></script>

当たり前ですが、jQuery の読み込みも忘れずに!!

次に、コンテンツとなるHTMLを記述します。

<div class="wrap_slider">
    <div><img src=“img/slider01.jpg"></div>
    <div><img src=“img/slider02.jpg"></div>
    <div><img src=“img/slider03.jpg"></div>
    <div><img src=“img/slider04.jpg"></div>
    <div><img src=“img/slider051.jpg"></div>
</div>

クラス名[ wrap_slider ] はもちろん任意のクラス名でOKです。

いよいよスライダーのスクリプトを記述します。

$(‘.wrap_slider').slick();

基本的には上記だけで動きます。

オプションでカスタマイズ

上記のままですと、デフォルトの機能の状態になっています。
オプションを指定することで、色々カスタマイズが可能です。

以下よく使うオプションをまとめました。

$(‘.wrap_slider’).slick({
    // キーボードの左右のボタンでの画像切り替え(初期設定:true)
    accessibility: true,
    // 自動再生(初期設定:false)
    autoplay: false,
    // 自動再生時のスライドのスピード(初期設定:3000)
    autoplaySpeed: 3000,
    // 次へ・前への表示非表示(初期設定:true)
    arrows: true,
    // 前へボタンのカスタマイズ(初期設定:<button type="button" class="slick-prev">Previous</button>)
    prevArrow: '<button type="button" class="slick-prev">Previous</button>',
    // 次へボタンのカスタマイズ(初期設定:<button type="button" class="slick-next">Next</button>)
    nextArrow: '<button type="button" class="slick-next">Next</button>',
    //表示選択している要素を中央に(初期設定:false)
    centerMode: false,
    //中央にした要素の左右のpadding(初期設定:50px)
    centerPadding: '50px',    cssEase: 'ease',
    //ページ送りのドットの表示(初期設定:false )
    dots: 'false',
    //ページ送りのドットの ul の クラス名(初期設定:'slick-dots' )
    dotsClass: 'slick-dots',
    //マウスでのドラッグ(初期設定:'true' )
    draggable: 'true',
    //スライダーでの画像切り替えのフェード(初期設定:'false' )
    fade: 'false',
    //イージング設定(初期設定:'linear' )
    easing: 'linear',
    //スライダーのループ(初期設定:true )
    infinite: true,
    //スライダーの初期表示要素(初期設定:0 )
    initialSlide: 0,
    //画像の表示を遅らせるか(初期設定:'ondemand' )
    lazyLoad: 'ondemand',
    //フォーカス時のスライダーの停止(初期設定:true )
    pauseOnFocus: true,
    //ホバー時のスライダーの停止(初期設定:true )
    pauseOnHover: true,
    //ドットホバー時のスライダーの停止(初期設定:false )
    pauseOnDotsHover: false,
    //表示したいスライダーの数(初期設定:1)
    slidesToShow: 1,
    //動かずスライダーの数(初期設定:1 )
    slidesToScroll: 1,
    //スライダーの動く速さ(初期設定:300 )
    speed: 300,
    //スワイプ(初期設定:true )
    swipe: true,
    //スワイプ時に slidesToScroll の設定値以上に動かすか(初期設定:false )
    swipeToSlide: false,
    //スライダーの縦並び(初期設定:false )
    vertical: false,
    //スライダーの横並び順を右から左に(初期設定:false )
    rtl: false,
    //スライダーのアニメーションが終わるまでクリック等のイベントを無視(初期設定:true )
    waitForAnimate: true
  });

もちろんサムネイルを入れることもできます

矢印やドットではなくて、サムネイルを使ったスライダーを導入したい場合もあるかと思います。 そんな時でも Slick なら簡単に導入できます。

オプション 'asNavFor ‘ にそれぞれのid/class名を指定してやります。

HTML

<!--スライダー-->
	<div id="wrap_slide">
		<div><img src="img/img01.png"></div>
		<div><img src="img/img01.png"></div>
		<div><img src="img/img01.png"></div>
    </div>
<!--/スライダー-->
<!--サムネイル-->
	<div id="thum_slide">
		<div><img src="img/thum01.png"></div>
		<div><img src="img/thum02.png"></div>
		<div><img src="img/thum03.png"></div>
	</div>
<!--/サムネイル-->

Javascript

$(‘#wrap_slide').slick({
	asNavFor: '#thum_room_slide01'
});
$(‘#thum_slide').slick({
	asNavFor: '#room_slide01'
});

まとめ

いかがでしたでしょうか。
まだ、経験の浅い方でも簡単に導入できると思います。
ぜひ試してみてください!