jQueryプラグインSlick(スライダー)を使用し、JavaScriptで特定の日付(ex.>5,15,25の日)だけにバナーを出したい

前提・実現したいこと

jQueryプラグインSlick(スライダー)を使用し、JavaScriptで特定の日付(ex.>5,15,25の日)だけに特定のバナーが出るようにしたい。

発生している問題・エラーメッセージ

slickを使用した状態で以下のようにコードを書くと、バナー画像を表示・非表示にすることができました。
しかしながら、スライダーの下部に表示されるドットの数が、

<li id="special">がdisplay:none;の時、バナーの枚数と合いません。（バナー画像は3枚なのに、ドット自体は４つ表示されている）

ドットの数が合うようにするにはどうしたらいいのでしょうか。

該当のソースコード

<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/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

m.ts10806

2018/11/11 08:24

ソースコードはマークダウンのcode機能を利用してください　https://teratail.com/help#about-markdown

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

回答1件

ベストアンサー

Slickは、デフォルトでは、それを適用した要素の子要素を取得してスライドとして処理します。このとき、子要素が非表示(display:noneなど)かどうかは判定されず、要素が存在するかどうかで判定されます。

スライド要素の数は、Slickがドット要素を生成する時にも利用されるので、display:noneで見た目上消したスライドの分も生成されます。

問題のケースでは、「スライドを消す」というのを「スライドの表示を消す」のではなく、「スライドの要素を消す」と考えるといいと思います。

処理の流れとしては以下になります。

日付の条件判定を行う
条件に合致しない(5,15,25日でない)場合、該当のスライド要素を削除する
スライダー要素にSlickを適用する

コードは以下の通りです。

JavaScript
1$(function() {
2    // 1. 日付の条件判定
3    var d = new Date();
4    var day = d.getDate();
5
6    if(day !== 5 && day !== 15 && day !== 25){
7        // 2. 条件に合致しない(5,15,25日でない)場合、該当のスライド要素を削除する
8        $('#special').remove();
9    }
10
11    // 3. スライダー要素にSlickを適用する
12    $('#slider').slick(/* 省略 */)
13});