jQuery

[jQuery]レスポンシブ対応!便利なサムネイル付スライダー「slick」

設置も簡単なサムネイル付スライダー「slick」のご紹介。
Photoギャラリーや不動産関連で複数枚の写真を表示させたい時ってありますよね。こんな感じに…↓

slick

このサムネイル付スライダーが実装できちゃうのが「slick」です!

設置方法

  1. slickサイトよりファイル一式ダウンロード
  2. ファイルを解凍し、サイトに設置(fonts、slick.css、slick-theme.css、slick.min.js、ajax-loader.gif)header内にcssとjsを記述してね!

  
<link rel="stylesheet" type="text/css" href="slick.css" media="screen" />
<link rel="stylesheet" type="text/css" href="slick-theme.css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="slick.min.js"></script>

表示させたい場所にhtmlを設置


<ul class="slider">
	<li><a href="#"><img src="../images/sample1.jpg"></a></li>
	<li><a href="#"><img src="../images/sample2.jpg"></a></li>
	<li><a href="#"><img src="../images/sample3.jpg"></a></li>
	<li><a href="#"><img src="../images/sample4.jpg"></a></li>
</ul>

また、様々なカスタマイズが可能。
デフォルトではサムネイルは付いていないので、サムネイル付にしたい場合は…

サムネイル付にするには以下を記述

HTML

<!-- ↓スライダー本体 -->
<ul class="thumb-item">   
<li><a href="#"><img src="../images/hoge.jpg"></a></li>
<li><a href="#"><img src="../images/hoge.jpg"></a></li>
<li><a href="#"><img src="../images/hoge.jpg"></a></li>
</ul>
<!-- ↓サムネイル -->
<ul class="thumb-item-nav">
<li><a href="#"><img src="../images/thumb_hoge.jpg"></a></li>
<li><a href="#"><img src="../images/thumb_hoge.jpg"></a></li>
<li><a href="#"><img src="../images/thumb_hoge.jpg"></a></li>
</ul>

jQuery

$(function() {
     $('.thumb-item').slick({
          infinite: true,
          slidesToShow: 1,
          slidesToScroll: 1,
          fade: true,
          arrows: false,
          focusOnSelect: true,
          responsive:  true,
          asNavFor: '.thumb-item-nav' //サムネイルのクラス名
     });
     $('.thumb-item-nav').slick({
          infinite: true,
          slidesToShow: 5,
          slidesToScroll: 1,
          asNavFor: '.thumb-item', //スライダー本体のクラス名
          focusOnSelect: true,
		  dots: true,
     });
});

あとはcssで整形すればOK!

参考サイトはこちら

その他のjQuery