Fancybox v5でカルーセル（Carousel）を作る方法

Fancybox v5でカルーセル（Carousel）を作る方法

• Carousel

デモページ

• デモページ１（カルーセル）
• デモページ２（サムネイル付き）

実装方法

• Getting Started

ダウンロードの場合

ダウンロードの場合は、ダウンロードした書庫ファイル内にある、「dist」ディレクトリ配下にある「carousel」ディレクトリ内にあるファイルを読み込んでください。

CSSファイルインクルード

<link rel="stylesheet" href="/assets/fancyapps/ui-main/dist/carousel/carousel.css" />

まず、CSSファイル「carousel.css」を読み込みます。

JSファイルインクルード

<script src="/assets/fancyapps/ui-main/dist/carousel/carousel.umd.js"></script>

次に「carousel.umd.js」を読み込んでください。

CDNの場合

CDNも利用可能です。

CSSファイルインクルード

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/carousel/carousel.css" />

JSファイルインクルード

<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/carousel/carousel.umd.js"></script>

カルーセル

デモ

• デモページ１（カルーセル）

ベーシック

サンプル

HTMLコード

<style type="text/css">
  #myCarousel1 {
    --f-carousel-slide-height: 60%;
    --f-carousel-spacing: 10px;
  }
  #myCarousel1 .f-carousel__slide {
    padding: 50px;
    background: #eee;
    justify-content: center;
    display: flex;
    height:200px;
    align-items: center;
    font-size: 36px;
  }
</style>
<h4>ベーシック</h4>
<div class="f-carousel" id="myCarousel1" >
  <div class="f-carousel__slide">1</div>
  <div class="f-carousel__slide">2</div>
  <div class="f-carousel__slide">3</div>
</div>
<script>
  const container = document.getElementById("myCarousel1");
  const options = { infinite: false };
  const myCarousel = new Carousel(container, options);
</script>

複数スライド

サンプル

複数スライド

HTMLコード

<style type="text/css">
  #myCarousel2 {
    --f-carousel-slide-width: calc(100% / 4);
  }
  #myCarousel2 .f-carousel__slide {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vp-c-brand);
    font-size: 36px;
    background-color: #f3f3f3; 
  }
</style>
<h4>複数スライド</h4>
<div class="f-carousel" id="myCarousel2" >
  <div class="f-carousel__slide">1</div>
  <div class="f-carousel__slide">2</div>
  <div class="f-carousel__slide">3</div>
  <div class="f-carousel__slide">4</div>
  <div class="f-carousel__slide">5</div>
  <div class="f-carousel__slide">6</div>
  <div class="f-carousel__slide">7</div>
  <div class="f-carousel__slide">8</div>
  <div class="f-carousel__slide">9</div>
  <div class="f-carousel__slide">10</div>
  <div class="f-carousel__slide">11</div>
  <div class="f-carousel__slide">12</div>
</div>
<script>
  const container2 = document.getElementById("myCarousel2");
  const options2 = { infinite: true, center: false, slidesPerPage: 4};
  const myCarousel2 = new Carousel(container2, options2);
</script>

カルーセルで表示させるスライド件数を調整する場合には、スタイルシートのプロパティ「–f-carousel-slide-width」の値の１００％の分母で調整してください。４スライドを表示させたい場合には『calc(100% / 4)』としてください。

• Slides Per Page

複数スライド（余白）

サンプル

HTMLコード

<style type="text/css">
  #myCarousel3 {
    --f-carousel-slide-width: calc(100% / 4);
    --f-carousel-spacing: 8px;
  }
  #myCarousel3 .f-carousel__slide {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vp-c-brand);
    font-size: 36px;
    background-color: #f3f3f3; 
  }
</style>
<h4>複数スライド（余白）</h4>
<div class="f-carousel" id="myCarousel3" >
  <div class="f-carousel__slide">1</div>
  <div class="f-carousel__slide">2</div>
  <div class="f-carousel__slide">3</div>
  <div class="f-carousel__slide">4</div>
  <div class="f-carousel__slide">5</div>
  <div class="f-carousel__slide">6</div>
  <div class="f-carousel__slide">7</div>
  <div class="f-carousel__slide">8</div>
  <div class="f-carousel__slide">9</div>
  <div class="f-carousel__slide">10</div>
  <div class="f-carousel__slide">11</div>
  <div class="f-carousel__slide">12</div>
</div>
<script>
  const container3 = document.getElementById("myCarousel3");
  const options3 = { infinite: true, center: false, slidesPerPage: 2, Dots: {dynamicFrom:2}};
  const myCarousel3 = new Carousel(container3, options3);
</script>

スライド間に予約を入れるにはスタイルシートのプロパティ「–f-carousel-spacing」に値を指定するとスライド間に余白を設定できます。

• Slide Gaps

ダイナミックドット

オプション「slidesPerPage」や、Dotの「dynamicFrom」のオプションを指定することで、表示するドットの数を調整することができます。

<script>
  const container3 = document.getElementById("myCarousel3");
  const options3 = { infinite: true, center: false, slidesPerPage: 2, Dots: {dynamicFrom:2}};
  const myCarousel3 = new Carousel(container3, options3);
</script>

• Dots

縦カルーセル

サンプル

HTMLコード

<style type="text/css">
  #myCarousel4 {
          --f-carousel-slide-height: 60%;
          --f-carousel-spacing: 10px;
          height: 200px;
  }
  #myCarousel4 .f-carousel__slide {
        padding: 50px;
        background: #eee;
        overflow-y:hidden;
        font-size: 24px;
  }
</style>
<h4>縦カルーセル</h4>
<div class="f-carousel" id="myCarousel4" >
  <div class="f-carousel__slide">1</div>
  <div class="f-carousel__slide">2</div>
  <div class="f-carousel__slide">3</div>
  <div class="f-carousel__slide">4</div>
  <div class="f-carousel__slide">5</div>
  <div class="f-carousel__slide">6</div>
  <div class="f-carousel__slide">7</div>
  <div class="f-carousel__slide">8</div>
  <div class="f-carousel__slide">9</div>
  <div class="f-carousel__slide">10</div>
  <div class="f-carousel__slide">11</div>
  <div class="f-carousel__slide">12</div>
</div>
<script>
  const container4 = document.getElementById("myCarousel4");
    const options4 = { axis: "y" };
  const myCarousel4 = new Carousel(container4, options4);
</script>

オプション「axis」に『y』を指定すると縦のカルーセルをつくることができます。

• axis

高さ調整カルーセル

サンプル

高さ調整カルーセル

HTMLコード

<style type="text/css">
  #myCarousel5 {
    --f-carousel-spacing: 10px;
  }
  #myCarousel5 .f-carousel__slide {
    padding: 50px;
    background: #eee;
    justify-content: center;
    display: flex;
    align-items: center;
    font-size: 36px;
  }
</style>
<h4>高さ調整カルーセル</h4>
<div class="f-carousel" id="myCarousel5" >
  <div class="f-carousel__slide" style="height:200px;">1</div>
  <div class="f-carousel__slide" style="height:300px;">2</div>
  <div class="f-carousel__slide" style="height:400px;">3</div>
</div>

<script>
  const container5 = document.getElementById("myCarousel5");
  const options5 = { infinite: true, adaptiveHeight:true};
  const myCarousel5 = new Carousel(container5, options5);
</script>

スライドで高さが違い、スライドを切り替えた際、調整したい場合は、オプション「adaptiveHeight」を『true』としてください。

• adaptiveHeight

左から右

サンプル

HTMLコード

<h4>左から右</h4>
<style type="text/css">
  #myCarousel6 {
    --f-carousel-spacing: 10px;
  }
  #myCarousel6 .f-carousel__slide {
    padding: 50px;
    background: #eee;
    justify-content: center;
    display: flex;
    align-items: center;
    font-size: 36px;
  }
</style>
<div class="f-carousel" id="myCarousel6" >
  <div class="f-carousel__slide">1</div>
  <div class="f-carousel__slide">2</div>
  <div class="f-carousel__slide">3</div>
</div>
<script>
  const container6 = document.getElementById("myCarousel6");
  const options6 = { direction: 'rtl'};
  const myCarousel6 = new Carousel(container6, options6);
</script>

オプション「direction」に『rtl』（Right To Left）を指定すると右から左への逆順でのカルーセルがでできます。

自動再生

• Autoplay

サンプル

HTMLコード

<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/carousel/carousel.autoplay.umd.js"></script>
<link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/carousel/carousel.autoplay.css"
/>
<style type="text/css">
  #myCarousel7 {
    --f-carousel-spacing: 10px;
  }
  #myCarousel7 .f-carousel__slide {
    padding: 50px;
    background: #eee;
    justify-content: center;
    display: flex;
    align-items: center;
    font-size: 36px;
  }
</style>
<div class="f-carousel" id="myCarousel7" >
  <div class="f-carousel__slide">1</div>
  <div class="f-carousel__slide">2</div>
  <div class="f-carousel__slide">3</div>
</div>
<script>
  new Carousel(document.getElementById("myCarousel7"), {
    Autoplay : {
      timeout : 2000
    }
  }, {
    Autoplay
  });
</script>

導入方法

まず、自動再生に必要なライブラリを読み込んでください。

<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/carousel/carousel.autoplay.umd.js"></script>
<link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/carousel/carousel.autoplay.css"
/>

加えて、Carousel初期化時にAutoplayのパラメータを設定してください。

<script>
  new Carousel(document.getElementById("myCarousel7"), {
    Autoplay : {
      timeout : 2000
    }
  }, { Autoplay }
  );
</script>

サムネイル付きカルーセル

• Thumbnails

デモ

• デモページ２（サムネイル付き）

導入方法

サムネイル付きのカルーセルを利用するにはCSSファイルとJSファイルを読み込んでください。

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/carousel/carousel.thumbs.css"
/>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/carousel/carousel.thumbs.umd.js"></script>

サムネイル付き（モダンスタイル）

サンプル

HTMLコード

<style>
  #myCarousel {
    max-width: 900px;
    margin: 0 auto;
  }
  #myCarousel .f-carousel__slide {
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
  <h4>サムネイル付き（モダンスタイル）</h4>
  <div class="f-carousel" id="myCarousel">
    <div
      class="f-carousel__slide"
      data-thumb-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07189.jpg"
    >
      <img
        width="900"
        height="600"
        alt=""
        data-lazy-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07189.jpg"
      />
    </div>
    <div
      class="f-carousel__slide"
      data-thumb-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06740.jpg"
    >
      <img
        width="900"
        height="600"
        alt=""
        data-lazy-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06740.jpg"
      />
    </div>
    <div
      class="f-carousel__slide"
      data-thumb-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06513.jpg"
    >
      <img
        width="900"
        height="600"
        alt=""
        data-lazy-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06513.jpg"
      />
    </div>
    <div
      class="f-carousel__slide"
      data-thumb-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC02278.jpg"
    >
      <img
        width="900"
        height="600"
        alt=""
        data-lazy-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC02278.jpg"
      />
    </div>
    <div
      class="f-carousel__slide"
      data-thumb-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06384.jpg"
    >
      <img
        width="900"
        height="600"
        alt=""
        data-lazy-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06384.jpg"
      />
    </div>
    <div
      class="f-carousel__slide"
      data-thumb-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06120_2.jpg"
    >
      <img
        width="900"
        height="600"
        alt=""
        data-lazy-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06120_2.jpg"
      />
    </div>
    <div
      class="f-carousel__slide"
      data-thumb-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC02264.jpg"
    >
      <img
        width="900"
        height="600"
        alt=""
        data-lazy-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC02264.jpg"
      />
    </div>
  </div>

<script>
  const container = document.getElementById("myCarousel");
  const options = { Dots: false };
  const carousel = new Carousel(container, options, { Thumbs });
</script>

ナビゲーションボタンスタイル変更

サンプル

HTMLコード

<style>
  .f-carousel {
      --f-button-width: 38px;
      --f-button-height: 38px;
      --f-button-svg-width: 16px;
      --f-button-svg-height: 16px;
      --f-button-svg-stroke-width: 2.5;
      --f-button-color: rgb(71 85 105);
      --f-button-border-radius: 50%;
      --f-button-shadow: 0 6px 12px -2px rgb(50 50 93 / 25%), 0 3px 7px -3px rgb(0 0 0 / 30%);
      --f-button-bg: #fff;
      --f-button-hover-bg: #f9f9f9;
      --f-button-active-bg: #f0f0f0
  }
  @media(min-width: 768px) {
      .f-carousel{
          --f-button-width: 48px;
          --f-button-height: 48px;
          --f-button-svg-width: 20px;
          --f-button-svg-height: 20px;
          --f-button-svg-stroke-width: 2.5;
          --f-button-next-pos: -26px;
          --f-button-prev-pos: -26px
      }
  }
</style>

ナビゲーションボタンのスタイルを変えたい場合には以下のページを参照しスタイルシートを適時変更ください。

• Style

サムネイル付き（クラシックスタイル）

サンプル

HTMLコード

 <style>
   #myCarousel2 {
     max-width: 900px;
     margin: 0 auto;
   }
   #myCarousel2 .f-carousel__slide {
     display: flex;
     justify-content: center;
     align-items: center;
   }
 </style>
   <h4>サムネイル付き（クラシックスタイル）</h4>
   <div class="f-carousel" id="myCarousel2">
     <div
       class="f-carousel__slide"
       data-thumb-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07189.jpg"
     >
       <img
         width="900"
         height="600"
         alt=""
         data-lazy-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07189.jpg"
       />
     </div>
     <div
       class="f-carousel__slide"
       data-thumb-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06740.jpg"
     >
       <img
         width="900"
         height="600"
         alt=""
         data-lazy-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06740.jpg"
       />
     </div>
     <div
       class="f-carousel__slide"
       data-thumb-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06513.jpg"
     >
       <img
         width="900"
         height="600"
         alt=""
         data-lazy-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06513.jpg"
       />
     </div>
     <div
       class="f-carousel__slide"
       data-thumb-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC02278.jpg"
     >
       <img
         width="900"
         height="600"
         alt=""
         data-lazy-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC02278.jpg"
       />
     </div>
     <div
       class="f-carousel__slide"
       data-thumb-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06384.jpg"
     >
       <img
         width="900"
         height="600"
         alt=""
         data-lazy-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06384.jpg"
       />
     </div>
     <div
       class="f-carousel__slide"
       data-thumb-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06120_2.jpg"
     >
       <img
         width="900"
         height="600"
         alt=""
         data-lazy-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06120_2.jpg"
       />
     </div>
     <div
       class="f-carousel__slide"
       data-thumb-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC02264.jpg"
     >
       <img
         width="900"
         height="600"
         alt=""
         data-lazy-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC02264.jpg"
       />
     </div>
   </div>

 <script>
   const container2 = document.getElementById("myCarousel2");
   const options2 = {
     Dots: false,
     Thumbs: {
       type: "classic",
     },
   };
   const carousel2 = new Carousel(container2, options2, { Thumbs });
 </script>

• Type

オプションの「Thumbs」の「Type」で『classic』を指定すると、クラシックスタイルのサムネイルになります。

サムネイル付き（自動再生）

サンプル

HTMLコード

<style>
  #myCarousel3 {
    max-width: 900px;
    margin: 0 auto;
  }
  #myCarousel3 .f-carousel__slide {
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
  <h4>サムネイル付き（自動再生）</h4>
  <div class="f-carousel" id="myCarousel3">
    <div
      class="f-carousel__slide"
      data-thumb-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07189.jpg"
    >
      <img
        width="900"
        height="600"
        alt=""
        data-lazy-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07189.jpg"
      />
    </div>
    <div
      class="f-carousel__slide"
      data-thumb-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06740.jpg"
    >
      <img
        width="900"
        height="600"
        alt=""
        data-lazy-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06740.jpg"
      />
    </div>
    <div
      class="f-carousel__slide"
      data-thumb-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06513.jpg"
    >
      <img
        width="900"
        height="600"
        alt=""
        data-lazy-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06513.jpg"
      />
    </div>
    <div
      class="f-carousel__slide"
      data-thumb-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC02278.jpg"
    >
      <img
        width="900"
        height="600"
        alt=""
        data-lazy-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC02278.jpg"
      />
    </div>

    <div
      class="f-carousel__slide"
      data-thumb-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06384.jpg"
    >
      <img
        width="900"
        height="600"
        alt=""
        data-lazy-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06384.jpg"
      />
    </div>
    <div
      class="f-carousel__slide"
      data-thumb-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06120_2.jpg"
    >
      <img
        width="900"
        height="600"
        alt=""
        data-lazy-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06120_2.jpg"
      />
    </div>
    <div
      class="f-carousel__slide"
      data-thumb-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC02264.jpg"
    >
      <img
        width="900"
        height="600"
        alt=""
        data-lazy-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC02264.jpg"
      />
    </div>
  </div>

<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/carousel/carousel.autoplay.umd.js"></script>
<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/carousel/carousel.autoplay.css"
/>
<script>
  const container3 = document.getElementById("myCarousel3");
  const options3 = { Dots: false, Autoplay : {
    timeout : 2000
  }
  };
  const carousel3 = new Carousel(container3, options3, {
  Autoplay,Thumbs
});
</script>

カルーセル＋Fancyboxギャラリー

サンプル

HTMLコード

<style>
  #myCarousel4 {
    max-width: 900px;
    margin: 0 auto;
  }
  #myCarousel4 .f-carousel__slide {
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
<h4>カルーセル＋Fancyboxギャラリー</h4>
<div class="f-carousel" id="myCarousel4">
  <div
    class="f-carousel__slide"
    data-thumb-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07189.jpg" 
    data-fancybox="gallery"
    data-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07189.jpg"
    data-caption="カピバラ"
  >
    <img
      width="900"
      height="600"
      alt=""
      data-lazy-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07189.jpg" 
    />
  </div>
  <div
    class="f-carousel__slide"
    data-thumb-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06740.jpg"
    data-fancybox="gallery"
    data-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06740.jpg"
    data-caption="ウサギ"
  >
    <img
      width="900"
      height="600"
      alt=""
      data-lazy-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06740.jpg"
    />
  </div>
  <div
    class="f-carousel__slide"
    data-thumb-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06513.jpg"
    data-fancybox="gallery"
    data-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06513.jpg"
    data-caption="ネコ"
  >
    <img
      width="900"
      height="600"
      alt=""
      data-lazy-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06513.jpg"
    />
  </div>
  <div
    class="f-carousel__slide"
    data-thumb-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC02278.jpg"
    data-fancybox="gallery"
    data-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC02278.jpg"
    data-caption="ハシビロコウ"
  >
    <img
      width="900"
      height="600"
      alt=""
      data-lazy-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC02278.jpg"
    />
  </div>

  <div
    class="f-carousel__slide"
    data-thumb-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06384.jpg"
    data-fancybox="gallery"
    data-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06384.jpg"
    data-caption="レッサーパンダ"
  >
    <img
      width="900"
      height="600"
      alt=""
      data-lazy-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06384.jpg"
    />
  </div>
  <div
    class="f-carousel__slide"
    data-thumb-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06120_2.jpg"
    data-fancybox="gallery"
    data-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06120_2.jpg"
    data-caption="アザラシ"
  >
    <img
      width="900"
      height="600"
      alt=""
      data-lazy-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06120_2.jpg"
    />
  </div>
  <div
    class="f-carousel__slide"
    data-thumb-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC02264.jpg"
    data-fancybox="gallery"
    data-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC02264.jpg"
    data-caption="サル"
  >
    <img
      width="900"
      height="600"
      alt=""
      data-lazy-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC02264.jpg"
    />
  </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"
/>
<script>
  const container4 = document.getElementById("myCarousel4");
  const options4 = { Dots: false };
  const carousel4 = new Carousel(container4, options4, { Thumbs });
   Fancybox.bind("[data-fancybox]");
</script>

カルーセルにFancyboxのギャラリーを組み合わせたい場合には、「data-fancybox」や「data-src」の属性を設定し、最後に、Fancyboxのbindメソッドを使って初期化してください。

キャプションを設定したい場合には「data-caption」属性も設定してください。

カルーセル同期

サンプル

HTMLコード

<style>
  #myCarousel5 {
    max-width: 900px;
    margin: 0 auto;
  }
  #myCarousel5 .f-carousel__slide {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor:pointer;
  }
  .f-carousel__slide_nav {
    height:80px;
    cursor:pointer;
    width:120px;
    display: flex;
    align-items:center;
    justify-content: center;
  }
  #myNavigation {
    --f-carousel-slide-width: 100px;
    --f-carousel-spacing: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    text-align: center;
    color: #ff3520;
    background: #f3f3f3;
    font-size: 1.25rem;
  }
  .is-nav-selected {
    color: #fff;
    background: #ff3520;
    height:10
  }
</style>
<h4>カルーセル同期</h4>

<div class="f-carousel" id="myCarousel5">
  <div
    class="f-carousel__slide"
    data-thumb-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07189.jpg" 
  >
    <img
      width="900"
      height="600"
      alt=""
      data-lazy-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07189.jpg" 
    />
  </div>
  <div
    class="f-carousel__slide"
    data-thumb-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06740.jpg"
  >
    <img
      width="900"
      height="600"
      alt=""
      data-lazy-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06740.jpg"
    />
  </div>
  <div
    class="f-carousel__slide"
    data-thumb-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06513.jpg"
  >
    <img
      width="900"
      height="600"
      alt=""
      data-lazy-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06513.jpg"
    />
  </div>
  <div
    class="f-carousel__slide"
    data-thumb-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC02278.jpg"
  >
    <img
      width="900"
      height="600"
      alt=""
      data-lazy-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC02278.jpg"
    />
  </div>

  <div
    class="f-carousel__slide"
    data-thumb-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06384.jpg"
  >
    <img
      width="900"
      height="600"
      alt=""
      data-lazy-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06384.jpg"
    />
  </div>
  <div
    class="f-carousel__slide"
    data-thumb-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06120_2.jpg"
  >
    <img
      width="900"
      height="600"
      alt=""
      data-lazy-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06120_2.jpg"
    />
  </div>
  <div
    class="f-carousel__slide"
    data-thumb-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC02264.jpg"
  >
    <img
      width="900"
      height="600"
      alt=""
      data-lazy-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC02264.jpg"
    />
  </div>
</div>

<div class="f-carousel" id="myNavigation">
  <div class="f-carousel__slide f-carousel__slide_nav">カピバラ</div>
  <div class="f-carousel__slide f-carousel__slide_nav">ウサギ</div>
  <div class="f-carousel__slide f-carousel__slide_nav">ネコ</div>
  <div class="f-carousel__slide f-carousel__slide_nav">ハシビロコウ</div>
  <div class="f-carousel__slide f-carousel__slide_nav">レッサー<br />パンダ</div>
  <div class="f-carousel__slide f-carousel__slide_nav">アザラシ</div>
  <div class="f-carousel__slide f-carousel__slide_nav">サル</div>
</div>
<script>
  const mainContainer = document.getElementById("myCarousel5");
  const mainOptions = {
    Dots: false
  };
  const mainCarousel = new Carousel(mainContainer, mainOptions);
  const navContainer = document.getElementById("myNavigation");
  const navOptions = {
    infinite: false,
    transition: false,
    center: true,
    fill: true,
    slidesPerPage: 1,
    dragFree: true,
    Dots: false,
    Sync: {
      target: mainCarousel,
    },
  };
  new Carousel(navContainer, navOptions);
</script>

二つの項目をカルーセルに紐づけるにはオプションで「Sync」を利用してください。

• Sync

オプション「target」の値にはカルーセルを設定したいインスタンスを指定してください。

ご参考

関連ページ

• Fancybox v4でカルーセル（Carousel）を作る方法
• Fancybox v5でギャラリーを作る方法【前編】
• Fancybox v5でギャラリーを作る方法【後編】
• Bootstrapでカルーセル（Carousel）を作る方法
• カルーセル（Carousel)を自作する方法
• 「Shoelace」でカルーセル（Carousel）を作成する方法
• スライドショーギャラリー（Slideshow Gallery)を自作する方法
• jQueryプラグイン「Owl Carousel 2」を使ってカルーセル／スライダーを設定する方法
• スライダープラグイン「slick」の紹介
• スライダープラグイン「Flickity」の紹介