slickプラグインで画像が切り替わるたびに個々の文字画像を重ねたいです。

画像ごとに固有の文字画像をスライド画像に重ねたいです。
afterchangeを使えばいいと思うのですが使い方がよくわからないのですが教えていただけないでしょうか。
文字画像はposition:absoluteでスライド画像に重ねて、jsでアクティブな画像にだけactiveクラスを付与することでdisplay：noneからblockになるようにする方法を考えました。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" />
</head>

<body>
    <div class="slider">
        <div>
            <img src="./image_a" alt="">
        </div>
        <div>
            <img src="./image_b" alt="">
        </div>
        <div></div>
        <img src="./image_c" alt="">
    </div>

<div class="string_image_a">
a用のスライドです
</div>
<div class="string_image_b">
        c用のスライドです
</div>
<div class="string_image_c">
        c用のスライドです
</div>

</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<script>
$(function() {
            $('.slider').slick({
            });
        });
</script>



</html>

.string_image_a, .string_image_b, .string_image_c{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    display: none;
}

.string_image_a.active, .string_image_b.active, .string_image_c.active{
    display: block;
}

x_x

2018/02/09 09:11

それぞれのアイテム中に入れておいてはダメなのでしょうか？

wkenginer

2018/02/09 15:40

ご回答ありがとうございます。それぞれのアイテムに記述しても大丈夫なのですが、その方法でもそれだけだと、ある画像がスライドでアクティブになっているときに他の画像がアクティブになっている時に表示させたい文字画像も表示されてしまうので困るんです。。

cheche0830

2018/07/23 14:38 編集

ちょっとよくわかりませんが、私も各画像内に文字をいれてopacityでけして忍ばせておけばいいと思います。slickは表示されてるものはcurrent的なclassが親につくので .current .moji とかでopacity 1にすれば出ませんか？ animeさせたいならtransitionでできますし

行動規範の内容に同意します

回答2件

スライドの中に入れておくとか。

HTML
1<div class="slider">
2	<div>
3		<img src="./image_a" alt="">
4		<div class="string_image_a">a用のスライドです</div>
5	</div>
6	<div>
7		<img src="./image_b" alt="">
8		<div class="string_image_b">b用のスライドです</div>
9	</div>
10	<div>
11		<img src="./image_c" alt="">
12		<div class="string_image_c">c用のスライドです</div>
13	</div>
14</div>

CSS
1.slider .slick-slide {
2	position: relative;
3}
4
5.string_image_a,
6.string_image_b,
7.string_image_c {
8    position: absolute;
9    top: 0;
10    left: 0;
11    right: 0;
12    margin: auto;
13    display: none;
14}
15.slider .slick-slide.slick-current .string_image_a,
16.slider .slick-slide.slick-current .string_image_b,
17.slider .slick-slide.slick-current .string_image_c {
18    display: block;
19}

投稿2018/02/10 19:07

kei344

総合スコア69625

afterChangeの使い方がわからないということでしょうか?

Slickの公式ページ http://kenwheeler.github.io/slick を見ると、以下のような感じで使えるようですね。

javascript
1$('.your-element').on('afterChange', function(e, slick, currentSlide){
2
3    // ここでクラスを付け替える
4    // $('〜').removeClass('〜') や $('〜').addClass('〜')
5
6});