問題
「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,
}
}]
});
コメント