はじめての Fancyapps-Fancybox v4 入門 - 応用機能編 -
Carousel - カルーセル 回転木馬無限ナビゲーション

Fancybox v4 の機能の一つの Carousel（カルーセル＝回転木馬）は、 素晴らしい機能と最も自然な感触を備えた素晴らしいナビゲーションを備えています。カルーセルの高さは固定されていず、コンテンツによって動的に変化します。
Carousel（カルーセル）は、４つの機能があります。このページでは、機能１、機能２、機能３について説明します。

fancyBoxは、GPLv3ライセンスの基でライセンスされています。
Fancyboxのライセンスの詳細規定は、14th May 2021 - License Agreement（英語） にあります。


１．Fancybox インストール方法

Carousel-Fancybox4を使用するためには、FancyappsのJSファイル、CSSファイルおよび tailwind CSSファイル の３つのファイルが必要です。 なお、Fancybox4は、jQueryが不要になりました。
JSファイル、CSSファイルはダウンロードせずに、つぎのCDNサイトのコンポーネントを使用します。
Fancyapps CDN jsdelivr.com ≫ または Fancyapps CDN unpkg.com ≫ を参照。

インストール方法は、Carousel Lazy loading（ゆっくりと読み込み）のすべてに共通です。
Tailwind CSS のマニュアルは、Tailwind CSS入門（日本語）を参照してください。 

<!-- Fancyapps-fancybox4 JS jsdelivr.net -->
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0.27/dist/fancybox.umd.js"></script> 
<!-- Fancyapps-fancybox4 CSS jsdelivr.net -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0.27/dist/fancybox.css"/> 
<!-- tailwind v2 CSS --> <!-- v3 <script src="https://cdn.tailwindcss.com"></script> -->
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css"/>


Carousel（カルーセル）の３つの書き方について以下に説明します。

 Lazy loading 1（ゆっくりと読み込み１）

Lazy loading 1は、Carousel（カルーセル）の基本的な使い方です。

javasccript

const myCarousel = new Carousel(document.querySelector(".carousel"), {
  // Options*
});
 * : Carousel（カルーセル）の Optionsは、ここ（英語）を参照。

CSS

#mainCarousel {
  color: #170724;

  --carousel-button-bg: #fff;
  --carousel-button-shadow: 0 2px 1px -1px rgb(0 0 0 / 20%),
    0 1px 1px 0 rgb(0 0 0 / 14%), 0 1px 3px 0 rgb(0 0 0 / 12%);
  --carousel-button-svg-width: 20px;
  --carousel-button-svg-height: 20px;
  --carousel-button-svg-stroke-width: 2.5;
}

#mainCarousel .carousel__slide {
  width: 70%;
  padding: 0;
}


HTML
imgタグのSRC属性に、つぎの属性を使います。data-lazy-src data-lazy-srcset 
<div id="myCarousel" class="carousel">
  <div class="carousel__slide">
    <img data-lazy-src="https://lipsum.app/id/1/1200x675" />
  </div>
  <div class="carousel__slide">
    <img data-lazy-src="https://lipsum.app/id/2/1200x675" />
  </div>
  <div class="carousel__slide">
    <img data-lazy-src="https://lipsum.app/id/3/1200x675" />
  </div>
</div>


Lazy loading 1、これまでのまとめ

これまでのLazy loading 1についてHTMLをまとめました。 Tailwind CSSマニュアルを下のタブ内に掲載していますので参照してください。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Carousel（カルーセル）の基本的な使い方 Lazy loading（のろい読み込み１）</title>
<!-- fancybox4 JS -->
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
<!-- fancybox4 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css"/> 
<!-- tailwind v2 CSS
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css"/>  
-->
<!-- tailwind v3 CSS -->
<script src="https://cdn.tailwindcss.com"></script>

<style>
#mainCarousel {
  color: #170724;

  --carousel-button-bg: #fff;
  --carousel-button-shadow: 0 2px 1px -1px rgb(0 0 0 / 20%),
    0 1px 1px 0 rgb(0 0 0 / 14%), 0 1px 3px 0 rgb(0 0 0 / 12%);
  --carousel-button-svg-width: 20px;
  --carousel-button-svg-height: 20px;
  --carousel-button-svg-stroke-width: 2.5;
}

#mainCarousel .carousel__slide {
  width: 70%;
  padding: 0;
}
</style>

</head>
<body>

<h1 style="text-align:center;font-size:30px;font-weight:bold">
Carousel（カルーセル）の基本的な使い方 Lazy loading（のろい読み込み１）<br>
 Lazy Loading Images １
</h1>
<!-- mb-4 w-10/12 max-w-xl mx-auto は、Tailwind CSS のクラス名です -->
<div id="mainCarousel" class="carousel mb-4 w-10/12 max-w-xl mx-auto">
  <div class="carousel__slide">
    <img data-lazy-src="http://urbanqee.com/album/pipipiga/img/01-01 national syowa park/P5040001-2.jpg" title="昭和公園１"/>
  </div>
  <div class="carousel__slide">
    <img data-lazy-src="http://urbanqee.com/album/pipipiga/img/01-01 national syowa park/P5040003-2.jpg" title="昭和公園２" />
  </div>
  <div class="carousel__slide">
    <img data-lazy-src="http://urbanqee.com/album/pipipiga/img/01-01 national syowa park/P5040004-2.jpg" title="昭和公園３" />
  </div>
  <div class="carousel__slide">
    <img data-lazy-src="http://urbanqee.com/album/pipipiga/img/01-01 national syowa park/P5040005-2.jpg" title="昭和公園４" />
  </div>
  <div class="carousel__slide">
    <img data-lazy-src="http://urbanqee.com/album/pipipiga/img/01-01 national syowa park/P5040008-2.jpg" title="昭和公園５" />
  </div>
  <div class="carousel__slide">
    <img data-lazy-src="http://urbanqee.com/album/pipipiga/img/01-01 national syowa park/P5040011-2.jpg" title="昭和公園６" />
  </div>
  <div class="carousel__slide">
    <img data-lazy-src="http://urbanqee.com/album/pipipiga/img/01-01 national syowa park/P5040017-2.jpg" title="昭和公園７" />
  </div>
</div>

<script>
const mainCarousel = new Carousel(document.querySelector("#mainCarousel"), {
  // Your options
  loop: true,
  cyclic: true,
  autoplay : true
});
</script>

</body>
</html>


 Lazy loading 2（ゆっくりと読み込み２）- ウォーターマーク表示

Lazy loading 2は、Carousel（カルーセル）の応用的な使い方です。スライド画像に背景画像を表示できます。
応用例として、ウォーターマーク表示が可能になります。

javasccript

const myCarousel = new Carousel(document.querySelector(".carousel"), {
  // Options*
});
 * : Carousel（カルーセル）の Optionsは、ここ（英語）を参照。

CSS

#mainCarousel {
  color: #170724;

  --carousel-button-bg: #fff;
  --carousel-button-shadow: 0 2px 1px -1px rgb(0 0 0 / 20%),
    0 1px 1px 0 rgb(0 0 0 / 14%), 0 1px 3px 0 rgb(0 0 0 / 12%);
  --carousel-button-svg-width: 20px;
  --carousel-button-svg-height: 20px;
  --carousel-button-svg-stroke-width: 2.5;
}

#mainCarousel .carousel__slide {
  background-size: cover;

  width: 70%;
  min-height: 400px;
  color: #fff;
  font-size: 3em;
}

HTML
Lazy loading 2は、スライド画像に背景画像または文字を表示できます。応用例としてウォーターマークの表示が可能です。 
<div id="myCarousel" class="carousel">
  <div class="carousel__slide" data-lazy-src="https://lipsum.app/id/1/1200x675">
    1
  </div>
  <div class="carousel__slide" data-lazy-src="https://lipsum.app/id/2/1200x675">
    2
  </div>
  <div class="carousel__slide" data-lazy-src="https://lipsum.app/id/3/1200x675">
    <img src="imgxxx.png" title="背景">
  </div>
</div>

Lazy loading 2、これまでのまとめ

これまでのLazy loading 2についてHTMLをまとめました。

  • Lazy loading 1（ゆっくりと読み込み１）まとめHTML デモ
  • Lazy loading 2（ゆっくりと読み込み２）まとめHTML デモ（ウォーターマーク表示） 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Carousel（カルーセル）の基本的な使い方 Lazy loading（ゆっくりと読み込み２）<br>
 Lazy Loading Images ２</title>
<!-- Fancyapps-fancybox4 JS -->
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
<!-- Fancyapps-fancybox4 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css"/> 
<!-- tailwind v2 CSS -->
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css"/> 

<style>
#mainCarousel {
  color: #170724;

  --carousel-button-bg: #fff;
  --carousel-button-shadow: 0 2px 1px -1px rgb(0 0 0 / 20%),
    0 1px 1px 0 rgb(0 0 0 / 14%), 0 1px 3px 0 rgb(0 0 0 / 12%);
  --carousel-button-svg-width: 20px;
  --carousel-button-svg-height: 20px;
  --carousel-button-svg-stroke-width: 2.5;
}

#mainCarousel .carousel__slide {
  background-size: cover;

  width: 70%;
  min-height: 400px;
  color: #fff;
  font-size: 3em;
}
</style>

</head>
<body>
<h1 class="mt-12 mb-8 px-6 text-center text-lg md:text-2xl font-semibold">
 Carousel（カルーセル）の基本的な使い方 Lazy loading（ゆっくりと読み込み２）<br>
 Lazy Loading Images ２ - ウォーターマーク（watermark）挿入
</h1>

<div id="mainCarousel" class="carousel mb-4 w-10/12 max-w-xl mx-auto">
  <div class="carousel__slide" data-lazy-src="http://urbanqee.com/album/pipipiga/img/01-01 national syowa park/P5040001-2.jpg" title="昭和公園１">
    <img src="http://urbanqee.com/webutil/photo/watermark/img/watermark-draft-g9e6b15769_640.png" title="watermark1">
  </div>
  <div class="carousel__slide" data-lazy-src="http://urbanqee.com/album/pipipiga/img/01-01 national syowa park/P5040003-2.jpg" title="昭和公園２">
    <img src="http://urbanqee.com/webutil/photo/watermark/img/watermark-draft-g9e6b15769_640.png" title="watermark2">
  </div>
  <div class="carousel__slide" data-lazy-src="http://urbanqee.com/album/pipipiga/img/01-01 national syowa park/P5040004-2.jpg" title="昭和公園３">
    <img src="http://urbanqee.com/webutil/photo/watermark/img/watermark-draft-g9e6b15769_640.png" title="watermark3">
  </div>
  <div class="carousel__slide" data-lazy-src="http://urbanqee.com/album/pipipiga/img/01-01 national syowa park/P5040005-2.jpg" title="昭和公園４">
    <img src="http://urbanqee.com/webutil/photo/watermark/img/watermark-draft-g9e6b15769_640.png" title="watermark4">
  </div>
  <div class="carousel__slide" data-lazy-src="http://urbanqee.com/album/pipipiga/img/01-01 national syowa park/P5040008-2.jpg" title="昭和公園５">
    <img src="http://urbanqee.com/webutil/photo/watermark/img/watermark-draft-g9e6b15769_640.png" title="watermark5">
  </div>
  <div class="carousel__slide" data-lazy-src="http://urbanqee.com/album/pipipiga/img/01-01 national syowa park/P5040011-2.jpg" title="昭和公園６">
    <img src="http://urbanqee.com/webutil/photo/watermark/img/watermark-draft-g9e6b15769_640.png" title="watermark6">
  </div>
  <div class="carousel__slide" data-lazy-src="http://urbanqee.com/album/pipipiga/img/01-01 national syowa park/P5040017-2.jpg" title="昭和公園７">
    <img src="http://urbanqee.com/webutil/photo/watermark/img/watermark-draft-g9e6b15769_640.png" title="watermark7">
  </div>
</div>

<script>
const mainCarousel = new Carousel(document.querySelector("#mainCarousel"), {
  // Your options
'slidesPerPage' : 1
});
</script>

</body>
</html>

 Lazy loading 3（ゆっくりと読み込み３）-integrated Fancybox（２つのFancyboxの結合）

Lazy loading 3の例は、２つのFancyboxを結合して、ナビゲーションできる機能です。

javasccript

// Initialise Carousel
const myCarousel = new Carousel(document.querySelector("#myCarousel"), {
  preload: 2,
});

// Customize Fancybox
Fancybox.bind('[data-fancybox="gallery"]', {
  Thumbs: false,
  Toolbar: true,

  closeButton: "top",

  Carousel: {
    Dots: true,
    on: {
      change: (that) => {
        myCarousel.slideTo(myCarousel.findPageForSlide(that.page), {
          friction: 0,
        });
      },
    },
  },
});
 * : Carousel（カルーセル）の Optionsは、ここ（英語）を参照。

CSS

.carousel {
  --carousel-button-color: #170724;
  --carousel-button-bg: #fff;
  --carousel-button-shadow: 0 2px 1px -1px rgb(0 0 0 / 20%),
    0 1px 1px 0 rgb(0 0 0 / 14%), 0 1px 3px 0 rgb(0 0 0 / 12%);

  --carousel-button-svg-width: 20px;
  --carousel-button-svg-height: 20px;
  --carousel-button-svg-stroke-width: 2.5;
}

.carousel .carousel__slide {
  width: 30%;
  padding: 10px;
}

.carousel .carousel__button.is-prev {
  left: -1.5rem;
}

.carousel .carousel__button.is-next {
  right: -1.5rem;
}

.carousel .carousel__button:focus {
  outline: none;
  box-shadow: 0 0 0 4px #A78BFA;
}

.fancybox__container {
  --fancybox-bg: #fff;
  --fancybox-color: #4B5563;

  --carousel-button-width: 50px;
  --carousel-button-height: 50px;
  --carousel-button-bg: rgba(255, 255, 255, 0.9);

  --carousel-button-svg-stroke-width: 1.8;
  --carousel-button-svg-filter: none;
}

.fancybox__caption {
  padding: 1rem 4rem 0 4rem;
  font-size: 1rem;
  line-height: 1.5rem;
}

HTML
imgタグのSRC属性に、つぎの属性を使います。data-lazy-src data-lazy-srcset 
<div id="myCarousel" class="carousel w-10/12 max-w-5xl mx-auto">
  <div
    class="carousel__slide"
    data-src="http://urbanqee.com/album/pipipiga/img/10-01 hibiya park//PC040157.jpg"
    data-fancybox="gallery"
    data-caption="日比谷公園１"
  >
    <img
      width="600"
      height="400" data-caption="日比谷公園１"
      data-lazy-src="http://urbanqee.com/album/pipipiga/img/10-01 hibiya park//PC040157.jpg"
    />
  </div>

  <div
    class="carousel__slide"
    data-src="http://urbanqee.com/album/pipipiga/img/10-01 hibiya park//PC040158.jpg"
    data-fancybox="gallery"
    data-caption="日比谷公園２"
  >
    <img
      width="600"
      height="400"
      data-lazy-src="http://urbanqee.com/album/pipipiga/img/10-01 hibiya park//PC040158.jpg"
    />
  </div>

これまでのまとめ

これまでのLazy loading 3についてHTMLをまとめました。

  • Lazy loading 1（ゆっくりと読み込み１）まとめHTML デモ
  • Lazy loading 2（ゆっくりと読み込み２）まとめHTML デモ（ウォーターマーク表示）
  • Lazy loading 3（ゆっくりと読み込み３）まとめHTML デモ（２つのFancyboxの結合） 

<!DOCTYPE html>
<html>
<!-- https://fancyapps.com/showcase/  引用 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Carousel（カルーセル）の基本的な使い方 Lazy loading（ゆっくりと読み込み３）<br>
 Image carousel with lazy loading and integrated Fancybox</title>
<!-- fancybox4 JS -->
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
<!-- fancybox4 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css"/> 
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css"/> 

<style>
.carousel {
  --carousel-button-color: #170724;
  --carousel-button-bg: #fff;
  --carousel-button-shadow: 0 2px 1px -1px rgb(0 0 0 / 20%),
    0 1px 1px 0 rgb(0 0 0 / 14%), 0 1px 3px 0 rgb(0 0 0 / 12%);

  --carousel-button-svg-width: 20px;
  --carousel-button-svg-height: 20px;
  --carousel-button-svg-stroke-width: 2.5;
}

.carousel .carousel__slide {
  width: 30%;
  padding: 10px;
}

.carousel .carousel__button.is-prev {
  left: -1.5rem;
}

.carousel .carousel__button.is-next {
  right: -1.5rem;
}

.carousel .carousel__button:focus {
  outline: none;
  box-shadow: 0 0 0 4px #A78BFA;
}

.fancybox__container {
  --fancybox-bg: #fff;
  --fancybox-color: #4B5563;

  --carousel-button-width: 50px;
  --carousel-button-height: 50px;
  --carousel-button-bg: rgba(255, 255, 255, 0.9);

  --carousel-button-svg-stroke-width: 1.8;
  --carousel-button-svg-filter: none;
}

.fancybox__caption {
  padding: 1rem 4rem 0 4rem;
  font-size: 1rem;
  line-height: 1.5rem;
}
</style>

</head>
<body>

<h1 class="mt-12 mb-8 px-6 text-center text-lg md:text-2xl font-semibold">
 Carousel（カルーセル）の基本的な使い方 Lazy loading（ゆっくりと読み込み３）<br>
  Image carousel with lazy loading and integrated Fancybox<br>２つのFancyboxの結合
</h1>

<div id="myCarousel" class="carousel w-10/12 max-w-5xl mx-auto">
  <div
    class="carousel__slide"
    data-src="http://urbanqee.com/album/pipipiga/img/10-01 hibiya park//PC040157.jpg"
    data-fancybox="gallery"
    data-caption="日比谷公園１"
  >
    <img
      width="600"
      height="400" data-caption="日比谷公園１"
      data-lazy-src="http://urbanqee.com/album/pipipiga/img/10-01 hibiya park//PC040157.jpg"
    />
  </div>

  <div
    class="carousel__slide"
    data-src="http://urbanqee.com/album/pipipiga/img/10-01 hibiya park//PC040158.jpg"
    data-fancybox="gallery"
    data-caption="日比谷公園２"
  >
    <img
      width="600"
      height="400"
      data-lazy-src="http://urbanqee.com/album/pipipiga/img/10-01 hibiya park//PC040158.jpg"
    />
  </div>

  <div
    class="carousel__slide"
    data-src="http://urbanqee.com/album/pipipiga/img/10-01 hibiya park//PC040152.jpg"
    data-fancybox="gallery"
    data-caption="日比谷公園３"
  >
    <img
      width="600"
      height="400"
      data-lazy-src="http://urbanqee.com/album/pipipiga/img/10-01 hibiya park//PC040152.jpg"
    />
  </div>
  <div
    class="carousel__slide"
    data-src="http://urbanqee.com/album/pipipiga/img/10-01 hibiya park//PC040162.jpg"
    data-fancybox="gallery"
    data-caption="日比谷公園４"
  >
    <img
      width="600"
      height="400"
      data-lazy-src="http://urbanqee.com/album/pipipiga/img/10-01 hibiya park//PC040162.jpg"
    />
  </div>
  <div
    class="carousel__slide"
    data-src="http://urbanqee.com/album/pipipiga/img/10-01 hibiya park//PC040164.jpg"
    data-fancybox="gallery"
    data-caption="日比谷公園５"
  >
    <img
      width="600"
      height="400"
      data-lazy-src="http://urbanqee.com/album/pipipiga/img/10-01 hibiya park//PC040164.jpg"
    />
  </div>
  <div
    class="carousel__slide"
    data-src="http://urbanqee.com/album/pipipiga/img/10-01 hibiya park//PC040145.jpg"
    data-fancybox="gallery"
    data-caption="日比谷公園６"
  >
    <img
      width="600"
      height="400"
      data-lazy-src="http://urbanqee.com/album/pipipiga/img/10-01 hibiya park//PC040145.jpg"
    />
  </div>
  <div
    class="carousel__slide"
    data-src="http://urbanqee.com/album/pipipiga/img/10-01 hibiya park//PC040171.jpg"
    data-fancybox="gallery"
    data-caption="日比谷公園７"
  >
    <img
      width="600"
      height="400"
      data-lazy-src="http://urbanqee.com/album/pipipiga/img/10-01 hibiya park//PC040171.jpg"
    />
  </div>
  <div
    class="carousel__slide"
    data-src="http://urbanqee.com/album/pipipiga/img/10-01 hibiya park//PC040174.jpg"
    data-fancybox="gallery"
    data-caption="日比谷公園８"
  >
    <img
      width="600"
      height="400"
      data-lazy-src="http://urbanqee.com/album/pipipiga/img/10-01 hibiya park//PC040174.jpg"
    />
  </div>
</div>



<!--
<div id="mainCarousel" class="carousel mb-4 w-10/12 max-w-xl mx-auto">
  <div class="carousel__slide" data-lazy-src="http://urbanqee.com/album/pipipiga/img/01-01 national syowa park/P5040001-2.jpg" title="昭和公園１">
    <img src="http://urbanqee.com/webutil/photo/watermark/img/watermark-draft-g9e6b15769_640.png" title="watermark1">
  </div>
  <div class="carousel__slide" data-lazy-src="http://urbanqee.com/album/pipipiga/img/01-01 national syowa park/P5040003-2.jpg" title="昭和公園２">
    <img src="http://urbanqee.com/webutil/photo/watermark/img/watermark-draft-g9e6b15769_640.png" title="watermark2">

  </div>
  <div class="carousel__slide" data-lazy-src="http://urbanqee.com/album/pipipiga/img/01-01 national syowa park/P5040004-2.jpg" title="昭和公園３">
    <img src="http://urbanqee.com/webutil/photo/watermark/img/watermark-draft-g9e6b15769_640.png" title="watermark3">
  </div>
  <div class="carousel__slide" data-lazy-src="http://urbanqee.com/album/pipipiga/img/01-01 national syowa park/P5040005-2.jpg" title="昭和公園４">
    <img src="http://urbanqee.com/webutil/photo/watermark/img/watermark-draft-g9e6b15769_640.png" title="watermark4">

  </div>
  <div class="carousel__slide" data-lazy-src="http://urbanqee.com/album/pipipiga/img/01-01 national syowa park/P5040008-2.jpg" title="昭和公園５">
    <img src="http://urbanqee.com/webutil/photo/watermark/img/watermark-draft-g9e6b15769_640.png" title="watermark5">
  </div>
  <div class="carousel__slide" data-lazy-src="http://urbanqee.com/album/pipipiga/img/01-01 national syowa park/P5040011-2.jpg" title="昭和公園６">
    <img src="http://urbanqee.com/webutil/photo/watermark/img/watermark-draft-g9e6b15769_640.png" title="watermark6">
  </div>
  <div class="carousel__slide" data-lazy-src="http://urbanqee.com/album/pipipiga/img/01-01 national syowa park/P5040017-2.jpg" title="昭和公園７">
    <img src="http://urbanqee.com/webutil/photo/watermark/img/watermark-draft-g9e6b15769_640.png" title="watermark7">
  </div>
</div>

-->
<!--

<div id="mainCarousel" class="carousel mb-4 w-10/12 max-w-xl mx-auto">
  <div class="carousel__slide">
    <img data-lazy-src="https://lipsum.app/id/33/1200x675" />
  </div>
  <div class="carousel__slide">
    <img data-lazy-src="https://lipsum.app/id/44/1200x675" />
  </div>
  <div class="carousel__slide">
    <img data-lazy-src="https://lipsum.app/id/55/1200x675" />
  </div>
  <div class="carousel__slide">
    <img data-lazy-src="https://lipsum.app/id/66/1200x675" />
  </div>
  <div class="carousel__slide">
    <img data-lazy-src="https://lipsum.app/id/77/1200x675" />
  </div>
  <div class="carousel__slide">
    <img data-lazy-src="https://lipsum.app/id/88/1200x675" />
  </div>
  <div class="carousel__slide">
    <img data-lazy-src="https://lipsum.app/id/99/1200x675" />
  </div>
</div>

-->

<!--
<script src="https://fancyapps.com/assets/js/main.00713ad2.js"></script>
-->

<script>
// Initialise Carousel
const myCarousel = new Carousel(document.querySelector("#myCarousel"), {
  preload: 2,
});

// Customize Fancybox
Fancybox.bind('[data-fancybox="gallery"]', {
  Thumbs: false,
  Toolbar: true,

  closeButton: "top",

  Carousel: {
    Dots: true,
    on: {
      change: (that) => {
        myCarousel.slideTo(myCarousel.findPageForSlide(that.page), {
          friction: 0,
        });
      },
    },
  },
});
</script>

<script>
/*
Fancybox.bind('[data-fancybox="gallery"]', {
  Carousel: {
    Navigation: {
      prevTpl:
        '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 5l-7 7 7 7"/><path d="M4 12h16"/></svg>',
      nextTpl:
        '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4 12h16"/><path d="M13 5l7 7-7 7"/></svg>',
    },
  },
});
*/
</script>

</body>
</html>


 Virtual slides（仮想スライド）

Virtual slides（仮想スライド）については、fancyapps.comサイトの仮想スライドの使い方の説明が不十分のため、割愛させていただきます。


１ Fancyboxインストール方法｜２ Carousel（カルーセル）の基本的な使い方 ｜TOPへ



本ページ記載内容の引用・参照：Fancyapps ui carousel

fancybox関連リンク

Lightbox系メディアビューア（まとめ サイト内リンク）

NoビューアーJSフレームワークモーダル
window*2		画像動画*1動画共有サイト
動画		Webページスライドシュー備考
1LightboxPrototypeからjQueryに変更（v2.51)モーダル●●人気
2PiroboxjQueryモーダル●●推奨
3Videoboxmootoolsモーダル●
4Mediaboxmootoolsモーダル●●●
5ShadowboxPrototype、 MooTools (requires 1.2 Core)、 Dojo Toolkit、
Yahoo! User Interface Library、
Ext (requires ext-core.js)、 非JSフレームを選択可 		モーダル●●●●●推奨
6ColorboxjQueryモーダル●●●●●
7FotoramajQuery非モーダル●●●●●スライダー
8FancyboxjQueryモーダル●●●●●人気
※動画とは、SWF、FLV、MOV、WMV（*1)　 ※モーダルwindow：画像などメディアの表示は新しい別ウインドー（*2）


 最終更新日：2022. 5.15