Q&A
ご回答ありがとうございます。
MutationObserverを使って解決できました。
これはとても面白いですね、今後使っていきたいです。
slick.jsで、現在表示されている画像に付与される.slick-currentを引き金に、<p>を消すアクションを起こしたいのですが、うまくなりません。
.slick-currentは<li>に付与されます。
html
<p> この文字を消す </p> <ul class="slider"> <li> //１枚目 <div class="slider_item slider1"> <img src="<?php echo esc_url(get_template_directory_uri());?>/works/img/slide1.jpg"> </div> </li> <li> //２枚目 <div class="slider_item"> <img src="<?php echo esc_url(get_template_directory_uri());?>/works/img/slide2.jpg"> </div> </li> </ul>
jqueryで、１枚目の画像に.slick-currentが付与されたら<p>要素を消す。
$(function(){ if ($('.slick-current').children().hasClass('slider1')) { $('p').hide(); } else { $('p').show(); } });
どこがおかしいのか分かりません。。。
どうすれば動きますか？？？？
もしかしてslickの仕様上不可能？？
回答2件
0
イベント時に処理すればよいと思います。
【slick - the last carousel you'll ever need】
http://kenwheeler.github.io/slick/
【レスポンシブ対応で簡単にカルーセルを実現！ slick.js の使い方 | ARAKAZE NOTE】
http://arakaze.ready.jp/archives/2477
【どこよりも詳しい万能スライダーjQueryプラグインslick.jsの使い方 | ITハット】
http://ithat.me/2016/10/17/how-to-use-slick-jquery-plugin
js
1var $slider = $('.slider'); 2$slider.slick(); 3 4$slider.on('afterChange', function(slick, currentSlide){ 5 console.log('スライド切り替え後のイベント'); 6});
投稿2018/04/12 10:55
総合スコア69398
0
ベストアンサー
どこがおかしいのか分かりません。。。
掲載のコードはslick-currentというクラス名を持つ要素が既に存在していることを前提に対象となる要素を取得しようとしているので、今回のように動的にslick-currentというクラス名が対象要素にライブラリ等で付与されるような場合は上手くいきません。
slick.jsで、現在表示されている画像に付与される.slick-currentを引き金に、<p>を消すアクションを起こしたいのですが、うまくなりません。.slick-currentは<li>に付与されます。
動的にクラス名が付与されるのであれば、対象となる要素のclass属性の値の変化を監視し、slick-currentという値が付与されたタイミングで、目的の<p>タグを除去してあげれば良いかと思います。
今回の場合はMutationObserverが使えると思いますので、参考となりそうなリンクを以下に掲載します。
参考
投稿2018/04/12 10:24
編集2018/04/12 10:45
総合スコア2415
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/04/13 06:48