スリックスライダーについて

前提

jsを使ってスリックスライダーでコンテンツを表示したいのですが、
dots:trueでインジゲーターを表示させると、別のコンテンツで指定したcssが反映されてしまいます。

実現したいこと

・画像や文字を含めたコンテンツをスリックスライダーで表示させたいです。
・PCの時はコンテンツを横並びに、レスポンシブになったときにスリックスライダーに変更させたいです。

該当のソースコード

html
1<section class="program">
2<ul class="slider">
3<li>
4  <div class="icon"><img src="../../assets/planet-icon.png" alt="惑星のアイコン"></div>
5  <div class="title">SAMPLE TEXT</div>
6  <div class="wrapper">
7  <div class="icon-sp"><img src="../../assets/planet-icon.png" alt="惑星のアイコン"></div>
8<div class="content">
9sample text
10</div>
11    </div>
12<a  class="detail" href="">詳しく見る</a>
13</li>
14<li>
15  <div class="icon"><img src="../../assets/planet-icon.png" alt="惑星のアイコン"></div>
16  <div class="title">SAMPLE TEXT</div>
17  <div class="wrapper">
18  <div class="icon-sp"><img src="../../assets/planet-icon.png" alt="惑星のアイコン"></div>
19<div class="content">
20sample text
21</div>
22    </div>
23<a  class="detail" href="">詳しく見る</a>
24</li>
25<li>
26  <div class="icon"><img src="../../assets/planet-icon.png" alt="惑星のアイコン"></div>
27  <div class="title">SAMPLE TEXT</div>
28  <div class="wrapper">
29  <div class="icon-sp"><img src="../../assetsplanet-icon.png" alt="惑星のアイコン"></div>
30<div class="content">
31sample text
32</div>
33    </div>
34<a  class="detail" href="">詳しく見る</a>
35</li>
36<ul>
37</section>

scss
1.program{
2  background-color: $glass;
3  padding-bottom: 395px;
4  position: relative;
5  z-index: 10;
6.slider{
7    display: flex;
8    justify-content: space-around;
9    width: 83vw;
10    margin: 0 auto;
11    li{
12      width: 26.4vw;
13      height: 707px;
14      background: white;
15      border-radius: 50px;
16      box-shadow: 10px 10px 20px #3333;
17      .icon{
18        width: 140px;
19        height: 100px;
20        margin: 95px auto 60px;
21        img{
22          width: 100%;
23        }
24      }
25      .icon-sp{
26        display: none;
27      }
28      .title{
29        display: inline-block;
30        font-size: 3.6rem;
31        color: #4f642c;
32        border-bottom: 2px solid #4f642c;
33        padding-bottom: 15px;
34      }
35      .content{
36        line-height: 4.0rem;
37        margin: 60px auto 55px auto;
38        height: 135px;
39      }
40      .detail{
41        width: 160px;
42        height: 43px;
43        background-color: $orange;
44        border-radius: 22.5px;
45        color: white;
46        padding: 10px 33px 10px;
47      }
48    }
49  }
50}
51@media screen and (max-width: 900px){
52  .program{
53    padding-bottom: 145px;
54  .slider{
55      display: block;
56      width: 335px;
57      li{
58        width: 335px;
59        height: 284px;
60        padding: 30px 40px;
61        margin: 0 auto;
62         .icon{
63          display: none;
64        }
65        .title{
66          font-size: 2.0rem;
67          border-bottom: 2px solid #4f642c;
68          padding-bottom: 10px;
69        }
70        .wrapper{
71          display: flex;
72          align-items: center;
73          margin: 30px auto;
74        .icon-sp{
75          display: block;
76          width: 110px;
77          height: 110px;
78        }
79          .content{
80            height: 110px;
81            font-size: 1.4rem;
82            line-height: 3.0rem;
83            margin: 0 auto;
84          }
85        }
86        .detail{
87          width: 110px;
88          height: 30px;
89          font-size: 1.4rem;
90          padding: 7px 19px 10px;
91        }
92      }

js
1$('.slider').slick({
2    mobileFirst: true,
3    autoplaySpeed:5000,
4  dots: true,
5      responsive: [ {
6        breakpoint: 600,
7        settings: 'unslick'
8    } ]
9});
10//リサイズした時に実行
11$(window).on('resize orientationchange', function() {
12$('.slider').slick('resize');
13});

試したこと

レスポンシブの際に画像の位置が変わるので、display:noneで切り替えています。
jsでdots:trueにすると以下の画像のように、liで指定したcssが反映されてしまいます。

・ulにclass名をつける→変わらずliのcssが反映
・liにclass名をつける→変わらずliのcssが反映（背景の白だけ反映されませんでした）
・liのcssを消す→ドットは表示されるが、スライダーにしたいコンテンツが変わってしまう

自分で指定したliがslicksliderのドットに適用されてしまっているのは理解ができるのですが、
対処法が分かりません。
分かりにくくなってしまって申し訳ないのですが、よろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

dreamweaver 2021使用しています。

Lhankor_Mhy

2022/06/14 03:14

ご提示のHTMLには、.program が存在しないようでした。

an_14

2022/06/14 13:06

ご指摘ありがとうございます。 ulの外側にあるのですが、修正いたしました。

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

回答1件

ベストアンサー

scss
1  .slider {
2
3//...
4
5    & > li {

などとしてみてはどうでしょうか。

投稿2022/06/14 03:18

Lhankor_Mhy

総合スコア36140

an_14

2022/06/14 13:20

ご回答ありがとうございます！！試してみたのですが、ドットの背景の白い四角の幅が狭くなった状態で適用されてしまいます。 @media screen and (max-width: 900px) .program .slider li のcssが .slick-dots li に一部（widthやheight）適用されてしまっているようです。（デベロッパーツールで確認すると.slick-dots liのcssが一部罫線で消されている状態）

Lhankor_Mhy

2022/06/15 00:16

そちらも回答と同様に処理してみてはどうでしょうか。

Lhankor_Mhy

2022/06/15 00:50

よく見ると、ご提示のSCSSですが、かっこの閉じ忘れがあるようですね。こちらで見ているコードは、そちらで見ているコードと異なる可能性があります。ですので、こちらで上手くいってもそちらで上手くいかない可能性がありそうです。問題が再現する具体的なコードを提示していただいた方が、正確なご助言ができそうです。

Lhankor_Mhy

2022/06/15 00:51 編集

こちらでは、これで上手くいきました。 li:not([role="presentation"]) そちらでも上手くいけばいいのですが。二階から目薬、という感じがします。

an_14

2022/06/20 02:48

返信遅くなってしまい、申し訳ありません。かっことじ忘れは修正いたしました。ご指摘ありがとうございます。 Slickでdots=trueにした際にオートで追加されるドット用のli（デベロッパーツール画像赤丸下の.slick-dots li）に自分が記述したスライダーにしたいコンテンツのli（画像赤丸内の.program .slider li）のcssが適用されてしまうのですが、自分で記述したコードは記載させていただいた通りです。Slickで追記されたぶんは、デベロッパーツールの写真を追加で載せています。 li:not([role="presentation"])はドットのliではなく、スライダーにしたいコンテンツのliの方に追記するということで違いないでしょうか？試してみましたが、変わらずcssが適用されてしまいます。質問の仕方が悪くご迷惑おかけしております。よろしくお願いいたします。

an_14

2022/06/20 02:48

Lhankor_Mhy

2022/06/20 05:27

> 試してみましたが、変わらずcssが適用されてしまいますそうなのですね、当方では問題がないように見えました。 https://jsfiddle.net/Lhankor_Mhy/uwr0f1yt/ おそらく、ご提示いただいていない部分に原因がありそうです。

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