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