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

お問い合わせはコチラ

代表電話

0476-35-2293

AM8:30-PM5:30（土日祝除く）

ビズプリ電話

0476-35-5059

AM9:00-PM5:00（土日祝除く）

menu

NEWS

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

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

2022年5月18日

ホームぺージ制作で使用頻度が非常に高いスライダープラグインの中でも、特に使われている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呼び出せば、二つ以上のスライダーを設置しても、スライダーごとに動作させる事が可能です。

※2022年現在の仕様の為、仕様変更などで動作しない場合があります。最新の仕様を元にご確認ください。

スライダーDEMO

千葉県の中小企業様を中心として、数多くのホームページ制作を行っています。

WEB制作会社はたくさんあるけれど、いまいちどこを選べば良いのかわからない。

そういったお客様の声をよく耳にします。

そんな時は、山本印刷に是非お任せ下さい！

印刷会社として創業より培ったデザイン力、マーケティング力に加え、名刺、ポスター、看板、カレンダーなど企業PRに必要な全てを山本印刷で承る事が可能です。

事前に細かなヒアリング・調査を行い、お客様のご要望をお伺いしたうえで、WEBサイトのターゲットや目的を明確にします。

そして、豊富なプランの中からお客様に合ったプランを選択し、明確・安心な料金設定で、効果的なWEBサイトをお客様にご提案します。

WEB制作専門スタッフがデザインから納品まで一貫して作成致しますので、格安でもクオリティの高いWEBサイトをご提供致します。

詳しくはhttps://www.yp-net.co.jp/web/をご覧ください。

山本印刷のホームページ制作

最近の記事

カテゴリー

月別アーカイブ