問題 × 解決策

slickで途中のスライドから始める方法

問題

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
});

参照

コメント

コメントを残す

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

seven − 4 =

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

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