問題
「slick」で、テキスト（キャッチコピー）を遅延表示させたい。
解決策
「slick」の各スライド内に配置したテキストを、スライド切り替わり前に「fadeOut(0)」で非表示にし、切り替わり後、「fadeIn」で表示させる。
テキストの遅延表示
スライドショーで、テキスト（キャッチコピー）を遅れて表示させているものは多いのではないでしょうか。
今回はjQueryスライダープラグイン「slick」で、テキスト（キャッチコピー）を遅延表示させる方法をご紹介します。
DEMOはこちら
スライド01
スライド02
スライド03
スライド04
スライド05
スライド06
HTML
<div class="slick-box type_img main-slide">
<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;
}テキストのみ遅延させる手順
テキストのみ遅延させる手順は以下になります。
スライド切り替わり前に、事前にテキストを「fadeOut(0)」で非表示にする。
スライド切り替わり後に、テキストを「fadeIn」で表示させる。
このスライド切り替わり前のタイミングを「beforeChange」イベント、切り替わり後のタイミングを「afterChange」イベントを使って実現します。
| beforeChange | スライドの切り替わる前のイベント |
|---|---|
| afterChange | スライドの切り替わった後のイベント |
記述例
$('.slick-box.type_img').on('init reInit beforeChange', function (event, slick, currentSlide, nextSlide) {
...
});
$('.slick-box.type_img').on('afterChange', function (event, slick, currentSlide, nextSlide) {
...
});テキストのみ遅延表示させる記述例
上記を元に、テキストのみ遅延表示させる記述例は以下になります。
$('.slick-box.type_img').on('init reInit beforeChange', function (event, slick, currentSlide, nextSlide) {
$(this).find('.slide').eq(currentSlide).find('.titles').fadeOut(0);
});
$('.slick-box.type_img').on('afterChange', function (event, slick, currentSlide, nextSlide) {
$(this).find('.slide').eq(currentSlide).find('.titles').delay(500).fadeIn(1000);
});
$('.slick-box.type_img').slick({
infinite: true,
fade: true,
slidesToShow: 1,
slidesToScroll: 1,
adaptiveHeight: true,
autoplay: true,
autoplaySpeed: 5000,
focusOnSelect: true,
pauseOnFocus: false,
pauseOnHover: false,
pauseOnDotsHover: false,
swipeToSlide: true,
arrows: false
});
コメント