jqueryでの無限ループ時の要素出現方法について

前提・実現したいこと

勉強中にわからなくなったことがあるので、質問失礼します。
無限ループしている、かつ要素が一定時間停止するアニメーションに対して、
1要素が停止している時間の間に、画面中央で停止している要素内にある子孫要素を表示したいと考えています。
イメージサイト：ツチヤ自動車株式会社さんSPサイト>採用情報ページで社員さんのお顔が流れていて、画面中央で停止した部分の吹き出しが表示される。。
再度画像が動き出したときには吹き出しが非表示になる。

該当のソースコード

社員さんの顔が流れるアニメ部分は下記jqueryで再現できました。
画面中央に1要素が来た時に吹き出しが表示される、動き出したら非表示にするjsが考え付かず、検索しても出てこずの状況です。
申し訳ございませんが、ご教示いただけますと幸いです...

html
1<div class="recruit__employee">
2    <ul id="js-recruit__employee__face"  class="recruit__employee__face flex">
3        <li class="recruit__employee__face__contents">
4            <div class="recruit__employee__face__contents__round face-bg">
5                <img src="../common/img/sp/recruit/pic_hero01.png">
6            </div>
7            <div class="recruit__employee__face__contents__comment">
8                <div class="recruit__employee__face__contents__comment__prefix">
9                    <p>ツチヤ自動車は</p>
10                </div>
11                <p class="recruit__employee__face__contents__comment__detail">お客様に頼られる！</p>
12            </div>
13        </li>
14        <li class="recruit__employee__face__contents">
15            <div class="recruit__employee__face__contents__round face-bg">
16                <img src="../common/img/sp/recruit/pic_hero02.png">
17            </div>
18            <div id="js-recruit__employee__face__contents__comment" class="recruit__employee__face__contents__comment">
19                <div class="recruit__employee__face__contents__comment__prefix">
20                    <p>ツチヤ自動車は</p>
21                </div>
22                <p class="recruit__employee__face__contents__comment__detail">失敗から学べる</p>
23            </div>
24        </li>
25        <li class="recruit__employee__face__contents">
26            <div class="recruit__employee__face__contents__round face-bg">
27                <img src="../common/img/sp/recruit/pic_hero03.png">
28            </div>
29            <div id="js-recruit__employee__face__contents__comment" class="recruit__employee__face__contents__comment">
30                <div class="recruit__employee__face__contents__comment__prefix">
31                    <p>ツチヤ自動車は</p>
32                </div>
33                <p class="recruit__employee__face__contents__comment__detail">頼れる先輩がいる！</p>
34            </div>
35        </li>
36        <li class="recruit__employee__face__contents">
37            <div class="recruit__employee__face__contents__round face-bg">
38                <img src="../common/img/sp/recruit/pic_hero05.png">
39            </div>
40            <div id="js-recruit__employee__face__contents__comment" class="recruit__employee__face__contents__comment">
41                <div class="recruit__employee__face__contents__comment__prefix">
42                    <p>ツチヤ自動車は</p>
43                </div>
44                <p class="recruit__employee__face__contents__comment__detail">職場が明るい</p>
45            </div>
46        </li>
47        <li class="recruit__employee__face__contents">
48            <div class="recruit__employee__face__contents__round face-bg">
49                <img src="../common/img/sp/recruit/pic_hero07.png">
50            </div>
51            <div id="js-recruit__employee__face__contents__comment" class="recruit__employee__face__contents__comment">
52                <div class="recruit__employee__face__contents__comment__prefix">
53                    <p>ツチヤ自動車は</p>
54                </div>
55                <p class="recruit__employee__face__contents__comment__detail">研修制度が充実！</p>
56            </div>
57        </li>
58        <li class="recruit__employee__face__contents">
59            <div class="recruit__employee__face__contents__round face-bg">
60                <img src="../common/img/sp/recruit/pic_hero08.png">
61            </div>
62            <div id="js-recruit__employee__face__contents__comment" class="recruit__employee__face__contents__comment">
63                <div class="recruit__employee__face__contents__comment__prefix">
64                    <p>ツチヤ自動車は</p>
65                </div>
66                <p class="recruit__employee__face__contents__comment__detail">世話好きの人が多い</p>
67            </div>
68        </li>
69        <li class="recruit__employee__face__contents">
70            <div class="recruit__employee__face__contents__round face-bg">
71                <img src="../common/img/sp/recruit/pic_hero09.png">
72            </div>
73            <div id="js-recruit__employee__face__contents__comment" class="recruit__employee__face__contents__comment">
74                <div class="recruit__employee__face__contents__comment__prefix">
75                    <p>ツチヤ自動車は</p>
76                </div>
77                <p class="recruit__employee__face__contents__comment__detail">チームワークがいい</p>
78            </div>
79        </li>
80    </ul>
81</div>

jquery
1$(function(){
2
3  $('document').ready(function(){
4      $('#js-recruit__employee__face__contents__comment').hide();
5  })
6
7  $('#js-recruit__employee__face').slick({
8      arrows: false,
9      autoplay: true,
10      autoplaySpeed: 2000,
11      cssEase: 'linear',
12      speed: 5000,
13      centerMode: true,
14      centerPadding: '12.5%',
15      slidesToShow: 3,
16      slidesToScroll: 1,
17  });
18
19  $('#js-recruit__employee__face__contents').on('afterChange', function(event, slick, currentSlide){
20    $('#js-recruit__employee__face__contents__comment').show();
21  });
22  
23});

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

回答1件

ベストアンサー

slick.js はアクティブなスライドに .slick-current .slick-activeがつくのでそれを利用する（CSSで処理）か、afterChangeなどイベントを拾ってjsで処理するかどちらかでできると思います。

【slick - the last carousel you'll ever need】
https://kenwheeler.github.io/slick/

投稿2020/03/25 14:48

kei344

総合スコア69608

nagano0141cafe

2020/03/25 15:37

回答ありがとうございます。前者の場合、各要素に対して吹き出しの内容が異なるので、後者のほうが処理が簡単かと思い、afterChangeを試してみました。（別の実装部分ですが...）ただ、こちらafterChangeが機能してくれなくてちょっと詰んでます... スライド後も表示させたいidの要素が表示されない、設定したconsoleも表示されない状況です。お手数ですが、jquery(更新)のコードを見ていただきたいです。

kei344

2020/03/25 15:44

追記のコードは、そもそもslickすら実行していないので、何をしたいのかがわかりません。（出てくるidも提示されたHTMLの中にない）

kei344

2020/03/25 15:45

【Events | slick - にほんご。】 https://tr.you84815.space/slick/events.html

nagano0141cafe

2020/03/26 06:06

別部位のコードを持ってきていました。申し訳ないです。質問文のjqueryを変更しました。 afterChangeをslickで提示されているものをもとに書いてみているのですが、動いてくれない状況です... ご教示お願いいたします。

kei344

2020/03/26 15:31

そもそもjQueryのイベント処理がわからないのでしょうか。afterChangeイベントが起こるのはslickを適用した要素です。特に関係のない部分に書いてもイベントは起こりません。「slickがafterChangeのとき」に「どのスライドか判別して」「特定の要素を表示させる」というコードになるとは思います。正直スライド部分に噴出しを入れて、.slick-active が付いたときに表示するようにCSSで処理するのが早いと思います。

nagano0141cafe

2020/03/27 09:19

イベントの解説をありがとうございます。 slickを触って間もないので丁寧な解説をいただけてありがたかったです。他イベントに関しては実際に触りながら理解していきます。対象のslickスライダーにcentermodeを使用しているため、CSSの調整をしてslick-centerにdisplay: blockを適用したことで中央に来た要素のみに吹き出しが出るようになりました。私の理解力が拙いなかで、ご協力感謝いたします。

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