問題 × 解決策

slickの前/次の矢印をカスタマイズする

問題

「slick」で、前/次の矢印をカスタマイズしたい。

解決策

「slick」のオプション設定で「arrows: true」を設定し、「prevArrow」と「nextArrow」で出力するHTMLの内容を変えてCSSを設定する。

 

前/次の矢印のカスタマイズ方法

jQueryスライダープラグイン「slick」で、前/次の矢印を工夫することでパッと見た時の印象が変わります。
今回はslickの前/次の矢印をカスタマイズする方法をご紹介します。

DEMOはこちら

スライド01

スライド02

スライド03

スライド04

スライド05

スライド06

HTML

<div class="slick-box type_img arrows">
	<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>

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;
}
/* 前/次の矢印の設定 */
.slick-box.type_img.arrows{
	position: relative;
}
.slick-box.type_img.arrows .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.type_img.arrows .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;
}

「slick」のオプション設定で「arrows: true」を設定する。

「slick」のオプション設定で「arrows: true」を設定します。
この設定を入れることで、前/次の矢印を生成できるようになります。

arrows 前/次の矢印を生成するかどうかの設定。
trueなら生成し、falseなら生成しません。
デフォルト:true

記述例

$('スライド').slick({
	arrows: true
});

「slick」のオプション設定で「prevArrow」「nextArrow」を設定する。

同じく「slick」のオプション設定で「prevArrow」と「nextArrow」を設定することで、前と次の矢印の出力されるHTMLを変更することが可能です。

prevArrow 前のスライドへ移動するナビのHTMLをカスタマイズできます。
デフォルト:<button class=”slick-prev” aria-label=”Previous” type=”button”>Previous</button>
nextArrow 次のスライドへ移動するナビのHTMLをカスタマイズできます。
デフォルト:<button class=”slick-next” aria-label=”Next” type=”button”>Next</button>

記述例

$('スライド').slick({
	prevArrow:'<div class="prev">前へ</div>',
	nextArrow:'<div class="next">次へ</div>',
});

ここに注意!

こちらは「arrows: true」を設定していないと設定が反映されないので、 「arrows: true」の設定を忘れないように注意してください。

矢印のCSSの設定

出力される、前と次の矢印にCSSを設定します。

/* 前/次の矢印の設定 */
.slick-box.type_img.arrows{
	position: relative;
}
.slick-box.type_img.arrows .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.type_img.arrows .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;
}

前/次の矢印をカスタマイズした記述例

上記を元に、前/次の矢印をカスタマイズした記述例は以下になります。

$('.slick-box.type_img.arrows').slick({
	infinite: true,
	slidesToShow: 1,
	slidesToScroll: 1,
	arrows: true,
	prevArrow:'<div class="prev"></div>',
	nextArrow:'<div class="next"></div>',
	autoplay: true,
	autoplaySpeed: 6000
});

コメント

コメントを残す

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

10 + four =

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

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