slick.jsについて（id名が消える）

バージョン：1.6.0
公式サイト：https://kenwheeler.github.io/slick/

jquery
1
2  $(document).ready(function(){
3  $('.your-class2').slick({
4    autoplay: true,
5    autoplaySpeed: 4000,
6    arrows: true,
7    dots: true,
8    slidesToShow: 4,
9    slidesToScroll: 1,
10    initialSlide: 0,
11    infinite: true
12  });
13});
14

html
1<ul class="your-class2 colum4 pc">
2    <li><div class="colum4_col" id="point01">
3            <p class="point"><img src="images/point01.png" alt=""></p>
4            <p class="title">タイトル</p>
5            <p class="text">
6              文章
7            </p>
8    
9            <p class="detail_btn"><a href="">詳しくはこちら</a></p>
10        </div></li>
11
12    <li><div class="colum4_col" id="point02">
13            <p class="point"><img src="images/point01.png" alt=""></p>
14            <p class="title">タイトル</p>
15            <p class="text">
16              文章
17            </p>
18    
19            <p class="detail_btn"><a href="">詳しくはこちら</a></p>
20        </div></li>
21
22	<li><div class="colum4_col" id="point03">
23		        <p class="point"><img src="images/point01.png" alt=""></p>
24            <p class="title">タイトル</p>
25            <p class="text">
26              文章
27            </p>
28    
29            <p class="detail_btn"><a href="">詳しくはこちら</a></p>
30		</div></li>
31
32    <li><div class="colum4_col last" id="point04">
33    	        <p class="point"><img src="images/point01.png" alt=""></p>
34            <p class="title">タイトル</p>
35            <p class="text">
36              文章
37            </p>
38    
39            <p class="detail_btn"><a href="">詳しくはこちら</a></p>
40        </div></li>
41
42    <li><div class="colum4_col last" id="point04">
43    	        <p class="point"><img src="images/point01.png" alt=""></p>
44            <p class="title">タイトル</p>
45            <p class="text">
46              文章
47            </p>
48    
49            <p class="detail_btn"><a href="">詳しくはこちら</a></p>
50        </div></li>
51</ul><!-- .your_class_end -->

現在上記コードでスライダーを動かしているのですが、clone生成した際に
liの中の<div class="colum4_col" id="point01"></div>
のid名だけが下記の様に消えてしまいます。（Firefox要素を）

html
1<li class="slick-slide slick-cloned slick-active" data-slick-index="5" aria-hidden="false" style="width: 276.667px;" tabindex="-1">
2<div class="colum4_col" id="ここのidが消える">
3            <p class="point"><img src="images/point01.png" alt=""></p>
4            <p class="title">タイトル</p>
5            <p class="text">文章
6            </p>
7    
8            <p class="detail_btn"><a href="/reason/#01" tabindex="0">詳しくはこちら</a></p>
9        </div></li>

▽Clone部分

html
1<!-- Clone -->
2
3<li class="slick-slide slick-cloned slick-active" data-slick-index="5" aria-hidden="false" style="width: 255.783px;" tabindex="-1">
4<div class="colum4_col" id="">
5    <p class="point"><img src="images/point01.png" alt=""></p>
6    <p class="title">タイトル</p>
7    <p class="text">文章</p>
8    <p class="detail_btn"><a href="" tabindex="0">詳しくはこちら</a></p>
9</div>
10</li>
11
12<li class="slick-slide slick-cloned slick-active" data-slick-index="6" aria-hidden="false" style="width: 255.783px;" tabindex="-1">
13<div class="colum4_col" id="">
14    <p class="point"><img src="images/point02.png" alt=""></p>
15    <p class="title">タイトル</p>
16    <p class="text">文章</p>
17    <p class="detail_btn"><a href="" tabindex="0">詳しくはこちら</a></p>
18</div>
19</li>
20
21<li class="slick-slide slick-cloned" data-slick-index="7" aria-hidden="true" style="width: 255.783px;" tabindex="-1">
22<div class="colum4_col" id="">
23    <p class="point"><img src="images/point03.png" alt=""></p>
24    <p class="title">タイトル</p>
25    <p class="text">文章</p>
26    <p class="detail_btn"><a href="" tabindex="0">詳しくはこちら</a></p>
27</div>
28</li>
29
30<li class="slick-slide slick-cloned" data-slick-index="8" aria-hidden="true" style="width: 255.783px;" tabindex="-1">
31<div class="colum4_col last" id="">
32    <p class="point"><img src="images/point04.png" alt=""></p>
33    <p class="title">タイトル</p>
34    <p class="text">文章</p>
35    <p class="detail_btn"><a href="" tabindex="0">詳しくはこちら</a></p>
36</div>
37</li>
38
39<!-- Clone -->

上記クローン後からは通常通りid名がpoint01~04と追記されます。

原因が分からず質問させてもらいました。

よろしくお願いいたします。

m.ts10806

2019/05/16 07:56

＞jjslick.js 「slick.js」ではないのでしょうか？念のため公式サイトへのリンクや、バージョンを質問本文に追記いただけますか？

Mokn1356

2019/05/16 08:01

ご指摘ありがとうございます。修正いたしました。

m.ts10806

2019/05/16 08:02

また念のため、cloneしているところのコードも追記願います。

Mokn1356

2019/05/16 08:07

追加いたしました。よろしくお願いいたします。

yasutomi

2019/05/16 08:09

コードブロックにjqueryを指定しているなら <script>は不要です。

yasutomi

2019/05/16 08:18

あと```jquery はないので ```javascript が正しいです。

m.ts10806

2019/05/16 08:25

yasutomiさんいつからか任意の指定ができるようになってわかりづらくなりましたね。あと、JavaScriptはjsで同効果です。質問者さん URLはマークダウンでリンクにしてください。また、結局のところcloneはどのように作成していますか？

Mokn1356

2019/05/16 08:53

Cloneはjqueryの「infinite: true」をつけると自動生成されるみたいです。無限ループはできるのですが、なぜかid名が消えてしまいました

m.ts10806

2019/05/16 09:15

プラグインのコード見てないので想像でしかないため回答前に確認ですが、id消えることによって何か問題が発生しますか？

Mokn1356

2019/05/16 23:27

id名point01~04で背景色などのスタイルを切り替えているので、 id名が消えると設定しているCSSが効かなくなってしまうという問題が発生しております。

m.ts10806

2019/05/16 23:31

その内容次第では代替案でいけなくもないと思います。ちょっと詳しく確認してみます

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

回答2件

ベストアンサー

元ソースを確認すると
https://cdn.jsdelivr.net/npm/slick-carousel@1.6.0/slick/slick.js
※CDNです

Infiniteのセットアップメソッドで確かにidを空にする処理が書かれています。

js
1    Slick.prototype.setupInfinite = function() {
2
3        var _ = this,
4            i, slideIndex, infiniteCount;
5
6        if (_.options.fade === true) {
7            _.options.centerMode = false;
8        }
9
10        if (_.options.infinite === true && _.options.fade === false) {
11
12            slideIndex = null;
13
14            if (_.slideCount > _.options.slidesToShow) {
15
16                if (_.options.centerMode === true) {
17                    infiniteCount = _.options.slidesToShow + 1;
18                } else {
19                    infiniteCount = _.options.slidesToShow;
20                }
21
22                for (i = _.slideCount; i > (_.slideCount -
23                        infiniteCount); i -= 1) {
24                    slideIndex = i - 1;
25                    $(_.$slides[slideIndex]).clone(true).attr('id', '') //ここ
26                        .attr('data-slick-index', slideIndex - _.slideCount)
27                        .prependTo(_.$slideTrack).addClass('slick-cloned');
28                }
29                for (i = 0; i < infiniteCount; i += 1) {
30                    slideIndex = i;
31                    $(_.$slides[slideIndex]).clone(true).attr('id', '') //ここ
32                        .attr('data-slick-index', slideIndex + _.slideCount)
33                        .appendTo(_.$slideTrack).addClass('slick-cloned');
34                }
35                _.$slideTrack.find('.slick-cloned').find('[id]').each(function() {
36                    $(this).attr('id', ''); //ここ
37                });
38
39            }
40
41        }
42
43    };

これは仕方ない部分もあるかもしれません。
clone作るとidもコピーされますが、そもそもHTMLのルールとして「同一IDは画面内に存在してはいけない」というのがあるので、それを防ぐための対策だと思います。

id名point01~04で背景色などのスタイルを切り替えている

ここは前提・仕様・要件にもなるので質問に追記しておいてもらいたいところではありますが、

スライドさせる要素が増減することを加味しても「別のIDを振るように（例えば元のID＋"_clone"）修正した元コードを自身のサーバーに配置する」というのはあまり現実的ではないので、id指定しているところをclassに変更するなどの対応が望ましいかと思われます。

投稿2019/05/17 00:17

m.ts10806

総合スコア80854

Mokn1356

2019/05/17 00:19

なるほどです。　一度classに変更して確認してみます。ありがとうございます。

Mokn1356

2019/05/17 01:36

classに変更しましたら無事希望通りの動きにできました。長々とご指摘・ご説明ありがとうございました。また、機会がありましたらよろしくお願いいたします。

m.ts10806

2019/05/17 01:48 編集

classは「複数設定できる」だけであって「1個しか使わない場合につけてはいけない」ルールはないので、classのほうが有益な場面が多いです。idのように制約が多い属性は使いどころを見極める必要があります。ただもちろん全てclassにすればいいというわけではなくて、役割分担の観点からすると「役割が完全に決まっているもの、固定化されたもの」はidを使って明確化したほうがコードに意味がでてきます。

Mokn1356

2019/05/17 01:51

今まであまり意識していませんでしたが、今後はclass、idの使いどころや役割等にも意識してつけていきたいと思います。いろいろとありがとうございました。

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