バージョン: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と追記されます。
原因が分からず質問させてもらいました。
よろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー