問題 × 解決策

slickでサムネイル付きのスライドショーを作る

問題

「slick」で、サムネイル付きのスライドショーを作りたい。

解決策

主となるスライドとは別にスライドを設けて、両スライドを連動させる。

 

サムネイル付きのスライドショーの実現

スライドショーの下にサムネイルのリストを配置することで、見た目の華やかさにも一役買ってくれます。
今回はjQueryスライダープラグイン「slick」で、サムネイル付きのスライドショーを作る方法をご紹介します。

DEMOはこちら

スライド01

スライド02

スライド03

スライド04

スライド05

スライド06

HTML

<div class="slick-box type_img main-slide asNavFor">
	<div class="slide">
		<p class="titles">スライド01</p>
		<p class="image">
			<img src="http://keylopment.com/_cms/wp-content/themes/keylopment/images/faq/title-bg01.jpg" alt="">
		</p>
	</div>
	<div class="slide">
		<p class="titles">スライド02</p>
		<p class="image">
			<img src="http://keylopment.com/_cms/wp-content/themes/keylopment/images/faq/title-bg02.jpg" alt="">
		</p>
	</div>
	<div class="slide">
		<p class="titles">スライド03</p>
		<p class="image">
			<img src="http://keylopment.com/_cms/wp-content/themes/keylopment/images/faq/title-bg03.jpg" alt="">
		</p>
	</div>
	<div class="slide">
		<p class="titles">スライド04</p>
		<p class="image">
			<img src="http://keylopment.com/_cms/wp-content/themes/keylopment/images/faq/title-bg04.jpg" alt="">
		</p>
	</div>
	<div class="slide">
		<p class="titles">スライド05</p>
		<p class="image">
			<img src="http://keylopment.com/_cms/wp-content/themes/keylopment/images/faq/title-bg05.jpg" alt="">
		</p>
	</div>
	<div class="slide">
		<p class="titles">スライド06</p>
		<p class="image">
			<img src="http://keylopment.com/_cms/wp-content/themes/keylopment/images/faq/title-bg06.jpg" alt="">
		</p>
	</div>
</div>
<div class="thumb-box"></div>

CSS


.slick-box.type_img .slide{
	padding: 0;
	background-color: #EAE6E5;
	border: 1px solid #ffffff;
	border-right: none;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	position: relative;
}
.slick-box.type_img .titles{
	display: inline-block;
	padding: 10px 15px;
	font-size: 125%;
	font-weight: bold;
	letter-spacing: 1pt;
	text-align: center;
	background-color: rgba(255,255,255,0.8);
	position: absolute;
	bottom: 10px;
	left: 10px;
}
.slick-box.type_img .image{
	margin-bottom: 0;
	line-height: 0;
}

メインとサムネイルの2つのスライドショーを用意する。

メイン用のスライドショーと、サムネイル用のスライドショーの2つを用意します。
その際、サムネイル用のスライドショーの中身は空の状態で構築します。

画像を格納したクラス「image」をコピーして挿入

メイン用のスライドショーから、画像を格納したクラス「image」をコピーし、サムネイル用のスライドショーに挿入していきます。

スライドショー同士を連動させるオプション「asNavFor」

asNavFor」を使用することで、スライドショー同士を連動させることができます。
これにより、サムネイル用のスライドショーを操作することでメイン用のスライドショーも一緒に操作することが可能となります。

記述例

$('メインのスライド').slick({
	asNavFor: 'サムネイルのセレクタ'
});
$('サムネイルのスライド').slick({
	asNavFor: 'メインのスライドのセレクタ'
});

サムネイル付きのスライドショーの記述例の全容

上記を元に、サムネイル付きのスライドショーの記述例は以下になります。

var s_count = $('.slick-box.type_img .slide').length;
var plusAll = '';
for(var i=0; i<s_count; i++){
	var img = $('.slick-box.type_img .slide').eq(i).find('.image');
	$('.thumb-box').append('<div class="slide"></div>');
	var slide = $('.thumb-box .slide').eq(-1);
	img.clone().appendTo(slide);
}
$('.slick-box.type_img.asNavFor').slick({
	infinite: true,
	slidesToShow: 1,
	slidesToScroll: 1,
	arrows: false,
	fade: true,
	autoplay: true,
	autoplaySpeed: 6000,
	draggable: false,
	swipe: false,
	swipeToSlide: false,
	touchMove: false,
	pauseOnFocus: false,
	pauseOnHover: false,
	pauseOnDotsHover: false,
	asNavFor: '.thumb-box' //サムネイルのクラス名
});
$('.thumb-box').slick({
	infinite: true,
	slidesToShow: 6,
	slidesToScroll: 1,
	arrows: false,
	asNavFor: '.slick-box.type_img.asNavFor', //スライダー本体のクラス名
	focusOnSelect: true,
	pauseOnFocus: false,
	pauseOnHover: false,
	pauseOnDotsHover: false,
	responsive: [{
		breakpoint: 767,
		settings: {
			slidesToShow: 2,
			slidesToScroll: 1,
		}
	}]
});

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

9 − 5 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧