NEWS

HOME > スライダープラグインとして最も有名な「slick」をサムネイル付きで同一ページに複数設置する方法

ホームぺージ制作で使用頻度が非常に高いスライダープラグインの中でも、特に使われているslickですが、施工実績の様なページでサムネイル付きで使用したい場合があります。

  1. <div class="slider-container">
  2.     <div id="slider">
  3.         <div><img src="./img/slider_img01.jpg"></div>
  4.         <div><img src="./img/slider_img02.jpg"></div>
  5.         <div><img src="./img/slider_img03.jpg"></div>
  6.     </div>
  7.     <div id="thumbs">
  8.         <div><img src="./img/slider_img01.jpg"></div>
  9.         <div><img src="./img/slider_img02.jpg"></div>
  10.         <div><img src="./img/slider_img03.jpg"></div>
  11.     </div>
  12. </div>

通常slickをサムネイル付きで組み込む場合、scriptはasNavForを使用して、サムネイルと紐づけてこの様に書くかと思いますが

  1. $("#slider").slick({
  2.     asNavFor:"#thumbs",
  3. })
  4. $("#thumbs").slick({
  5.     asNavFor:"#slider",
  6. })

例えば同一ページに複数の施工実績を掲載する際など二つ以上のスライダーを設置したい場合、以下の様に別のidを振ってもう一つscriptを書く必要があります。

  1. $("#slider2").slick({
  2.     asNavFor:"#thumbs",
  3. })
  4. $("#thumbs2").slick({
  5.     asNavFor:"#slider",
  6. })

同一ページに三つ程度であれば、上記の様に複数書いても問題ないかと思いますが、Wordpressなどを組込んでカスタム投稿タイプなどで追加していく場合は この方法が使えません。

idではなく同じclass名を振った場合は、複数書く必要はなくなりますが、全てのスライダーが同時に動いてしまいます。

  1. $(".thumb__item").slick({
  2.     asNavFor:".thumb__item-nav",
  3. })
  4. $(".thumb__item-nav").slick({
  5.     asNavFor:".thumb__item",
  6. })

以下の様な方法であれば解決出来そうです。

スライダーid名をimg1とした場合、サムネイルのid名をimg1-navとし-navを加えた形にして、each()メソッドを使い$(this).attr(“id”)で自らのid名を取得。取得したid名に-navを追加する事でサムネイルのidを指定してasNavFor:で連携。

逆にサムネイル側は自らのid名から-navをreplaceしてスライダーid名を指定します。

  1. <div class="slider-container">
  2.   <div class="thumb__item" id="img1">
  3.     <div><img src="img/slick/img01.jpg" alt=""></div>
  4.     <div><img src="img/slick/img02.jpg" alt=""></div>
  5.     <div><img src="img/slick/img03.jpg" alt=""></div>
  6.   </div>
  7.   <div class="thumb__item-nav" id="img1-nav">
  8.     <div><img src="img/slick/img01.jpg" alt=""></div>
  9.     <div><img src="img/slick/img02.jpg" alt=""></div>
  10.     <div><img src="img/slick/img03.jpg" alt=""></div>
  11.   </div>
  12. </div>
  1. let thumbItem = $('.thumb__item');
  2. let thumbItemNav = $('.thumb__item-nav');
  3.     
  4. $(function() {
  5.     thumbItem.each(function(){
  6.     $(this).slick({
  7.         asNavFor:"#" + $(this).attr("id") + "-nav",
  8.     });
  9.         });
  10.     thumbItemNav.each(function(){
  11.     $(this).slick({
  12.         asNavFor:"#" + $(this).attr("id").replace("-nav", ""),
  13.     });
  14.         });
  15. });

WordPressなどを組込んでカスタム投稿タイプなどで追加していく場合でも<?php the_ID(); ?> などで投稿id呼び出せば、二つ以上のスライダーを設置しても、スライダーごとに動作させる事が可能です。

スライダーDEMO