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

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

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


1.Fancybox インストール方法

Carousel-Fancybox4を使用するためには、FancyappsのJSファイル、CSSファイルおよび tailwind CSSファイル の3つのファイルが必要です。 なお、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(カルーセル)の3つの書き方について以下に説明します。

 Lazy loading 1(ゆっくりと読み込み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(のろい読み込み1)</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(のろい読み込み1)<br>
 Lazy Loading Images 1
</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="昭和公園1"/>
  </div>
  <div class="carousel__slide">
    <img data-lazy-src="http://urbanqee.com/album/pipipiga/img/01-01 national syowa park/P5040003-2.jpg" title="昭和公園2" />
  </div>
  <div class="carousel__slide">
    <img data-lazy-src="http://urbanqee.com/album/pipipiga/img/01-01 national syowa park/P5040004-2.jpg" title="昭和公園3" />
  </div>
  <div class="carousel__slide">
    <img data-lazy-src="http://urbanqee.com/album/pipipiga/img/01-01 national syowa park/P5040005-2.jpg" title="昭和公園4" />
  </div>
  <div class="carousel__slide">
    <img data-lazy-src="http://urbanqee.com/album/pipipiga/img/01-01 national syowa park/P5040008-2.jpg" title="昭和公園5" />
  </div>
  <div class="carousel__slide">
    <img data-lazy-src="http://urbanqee.com/album/pipipiga/img/01-01 national syowa park/P5040011-2.jpg" title="昭和公園6" />
  </div>
  <div class="carousel__slide">
    <img data-lazy-src="http://urbanqee.com/album/pipipiga/img/01-01 national syowa park/P5040017-2.jpg" title="昭和公園7" />
  </div>
</div>

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

</body>
</html>


 Lazy loading 2(ゆっくりと読み込み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(ゆっくりと読み込み1)まとめHTML デモ
  • Lazy loading 2(ゆっくりと読み込み2)まとめHTML デモ(ウォーターマーク表示)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Carousel(カルーセル)の基本的な使い方 Lazy loading(ゆっくりと読み込み2)<br>
 Lazy Loading Images 2</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(ゆっくりと読み込み2)<br>
 Lazy Loading Images 2 - ウォーターマーク(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="昭和公園1">
    <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="昭和公園2">
    <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="昭和公園3">
    <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="昭和公園4">
    <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="昭和公園5">
    <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="昭和公園6">
    <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="昭和公園7">
    <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(ゆっくりと読み込み3)-integrated Fancybox(2つのFancyboxの結合)

Lazy loading 3の例は、2つの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="日比谷公園1"
  >
    <img
      width="600"
      height="400" data-caption="日比谷公園1"
      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="日比谷公園2"
  >
    <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(ゆっくりと読み込み1)まとめHTML デモ
  • Lazy loading 2(ゆっくりと読み込み2)まとめHTML デモ(ウォーターマーク表示)
  • Lazy loading 3(ゆっくりと読み込み3)まとめHTML デモ(2つのFancyboxの結合)

<!DOCTYPE html>
<html>
<!-- https://fancyapps.com/showcase/  引用 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Carousel(カルーセル)の基本的な使い方 Lazy loading(ゆっくりと読み込み3)<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(ゆっくりと読み込み3)<br>
  Image carousel with lazy loading and integrated Fancybox<br>2つの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="日比谷公園1"
  >
    <img
      width="600"
      height="400" data-caption="日比谷公園1"
      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="日比谷公園2"
  >
    <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="日比谷公園3"
  >
    <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="日比谷公園4"
  >
    <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="日比谷公園5"
  >
    <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="日比谷公園6"
  >
    <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="日比谷公園7"
  >
    <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="日比谷公園8"
  >
    <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="昭和公園1">
    <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="昭和公園2">
    <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="昭和公園3">
    <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="昭和公園4">
    <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="昭和公園5">
    <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="昭和公園6">
    <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="昭和公園7">
    <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サイトの仮想スライドの使い方の説明が不十分のため、割愛させていただきます。


1 Fancyboxインストール方法2 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