前提・実現したいこと
jQueryプラグインSlick(スライダー)を使用し、JavaScriptで特定の日付(ex.>5,15,25の日)だけに特定のバナーが出るようにしたい。
発生している問題・エラーメッセージ
slickを使用した状態で以下のようにコードを書くと、バナー画像を表示・非表示にすることができました。
しかしながら、スライダーの下部に表示されるドットの数が、
ドットの数が合うようにするにはどうしたらいいのでしょうか。
該当のソースコード
<ul id="slider"> <li id="special"><a><img src="special_bnr.png"></a></li> <li><a href="url1.html"><img src="bnr.png"></a></li> <li><a href="url2.html"><img src="bnr2.png"></a></li> <li><a href="url3.html"><img src="bnr3.png"></a></li> </ul> <script type="text/javascript"> var d = new Date(); var day = d.getDate(); if(day == 5 || day == 15 || day == 25){ document.getElementById("special").style.display="block"; }else{ document.getElementById("special").style.display="none"; var slickDot = document.getElementsByClassName("slick-dots"); var liLastElementChild = slickDot.lastElementChild; liLastElementChild.addClass("dotnone"); } </script> <style> .dotnone{ display: none !important; } </style> <script type="text/javascript"> $(document).ready(function(){ $('#alpha_eyecatch').slick({ autoplay: true, dots: true, arrows: true, prevArrow:'<div class="prev"><img src="slick/btn_prev.png"></div>', nextArrow:'<div class="next"><img src="slick/btn_next.png"></div>' }); }); </script>試したこと
slickのドットにclassを加え、バナー画像と同様に、display:none;をかけるように
コードを書いてみたものの、スタイルが効いていないようです。
(Jsは初心者です。)
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー