問題
slickで途中のスライドから始めるには？
解決策
slickのオプションの「initialSlide」で、指定した順番のスライドから始めることができます。
途中のスライドから始める方法
jQueryスライダープラグイン「slick」で、途中のスライドから始める方法をご紹介します。
DEMOはこちら
- ※スライドの3番目から開始します。
スライド01
スライド02
スライド03
スライド04
スライド05
スライド06
「slick」のオプション設定で「initialSlide: スライドの順番（数値）」を設定する。
「initialSlide」で、開始時に表示させたいスライドの順番（数値）を指定することで、そのスライドから始めることができます。
| initialSlide | スライドの順番（半角数字）を0から指定することで、そのスライドから開始します。 デフォルト：0 |
|---|
記述例
$('スライド').slick({
initialSlide: 3
});HTMLはこちら
<div class="slick-box initial">
<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 on">
<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>CSSはこちら
.slick-box.initial .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.initial .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.initial .image{
margin-bottom: 0;
line-height: 0;
}
/* 前／次の矢印の設定 */
.slick-box.initial{
position: relative;
}
.slick-box.initial .prev{
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
width: 30px;
height: 30px;
background-color: rgba(255,255,255,0.8);
background-image: url(http://keylopment.com/_cms/wp-content/themes/keylopment/images/common/anchor-prev.png);
background-position: center center;
background-repeat: no-repeat;
background-size: 7px auto;
z-index: 1;
}
.slick-box.initial .next{
position: absolute;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 30px;
height: 30px;
background-color: rgba(255,255,255,0.8);
background-image: url(http://keylopment.com/_cms/wp-content/themes/keylopment/images/common/anchor-next.png);
background-position: center center;
background-repeat: no-repeat;
background-size: 7px auto;
z-index: 1;
}javascript
javascriptはこちらです。
var num = 0;
var obj = '';
if( jQuery('.slick-box.initial .slide.on').length ){
obj = jQuery('.slick-box.initial .slide.on');
}else{
obj = jQuery('.slick-box.initial .slide:first-child');
}
num = jQuery('.slick-box.initial .slide').index( obj );
jQuery('.slick-box.initial').slick({
infinite: true,
initialSlide: num,
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
prevArrow:'<div class="prev"></div>',
nextArrow:'<div class="next"></div>',
autoplay: true,
autoplaySpeed: 5000,
draggable: true,
swipe: true,
swipeToSlide: true,
touchMove: true,
focusOnSelect: true,
pauseOnFocus: false,
pauseOnHover: false,
pauseOnDotsHover: false
});
コメント