テック

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

2022年9月19日 by single コメントはまだありません

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

サンプル

HTMLコード

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width" />
   <title>Fancybox Gallery demo(5)</title>
   <link
     rel="stylesheet"
     href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css"
   />
  <style type="text/css">
  .carousel .carousel__slide {
      align-items: center;
      background-color: #eee;
      border-radius: 6px;
      display: flex;
      font-size: 2rem;
      height:12vw;
      justify-content: center;
      margin-right: 6px;
      transition: background .2s,color .2s;
  }
  </style>
</head>
<body>
  <div id="myCarousel1" class="carousel">
    <div class="carousel__slide">1</div>
    <div class="carousel__slide">2</div>
    <div class="carousel__slide">3</div>
  </div>
   <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
   <script>
      const myCarousel = new Carousel(document.querySelector(".carousel"), {
         // Options
      });
   </script>
</body>
</html>

デモ

デモページ

実装方法

Carousel

Fancybox導入

まず、Fancyboxを利用できるようにする

CSSファイルインクルード

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

JSファイルインルード

次にBody部の下部にJSファイルをインクルードしてください。

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

HTMLマークアップ

まず最初にカルーセルブロックを作ります。


<div class="carousel">
   ...
</div>

次に、カルーセルの項目ブロックをその中に設定します。

div class="carousel">
  <div class="carousel__slide">1</div>
  <div class="carousel__slide">2</div>
  <div class="carousel__slide">3</div>
</div>

Carousel初期化

最後にJavascriptでCarouselを初期化すれば、実装できます。

<script>
   const myCarousel = new Carousel(document.querySelector(".carousel"), {
      // Options
   });
</script>

スライドショー（自動再生）を有効化

Autoplay

サンプル

HTMLコード

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width" />
   <title>Fancybox Gallery demo(5)</title>
   <link
     rel="stylesheet"
     href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css"
   />
   <style type="text/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;
   }
   .carousel__button.is-prev {
     left: 50px;
   }
   .carousel__button.is-next {
     right: 50px;
   }
   #mainCarousel .carousel__slide {
     width: 70%;
     padding: 0;
   }
   </style>
</head>
<body>
   <div id="mainCarousel" class="carousel">
     <div class="carousel__slide">
       <img data-lazy-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06344.jpg" />
     </div>
     <div class="carousel__slide">
       <img data-lazy-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06513.jpg" />
     </div>
     <div class="carousel__slide">
       <img data-lazy-src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07591.jpg" />
     </div>
   </div>
   <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/carousel.umd.js"></script>
   <!-- スライドショーの実行ライブラリ -->
   <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/carousel.autoplay.umd.js"></script>
   <script>
      var myCarousel = new Carousel(document.querySelector("#mainCarousel"), {
       Autoplay: {
        timeout : 10,
        hoverPause : false
       },
      });
   </script>
</body>
</html>

デモ

デモページ

実装方法

以下のライブラリを読み込んでください。これでオートプレイ（自動再生）が有効になります。

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

このソースを読み込むだけです。デフォルトは「3000ミリ秒」なので３秒ごとにスライドが切り替わ和っていきます。

オプション指定

<script>
   var myCarousel = new Carousel(document.querySelector("#mainCarousel"), {
    Autoplay: {
     timeout : 10,
     hoverPause : false
    },
   });
</script>

Autoplayオプションで、値を指定すれば、カスタマイズできます。

Options

timeout

自動再生の項目切り替え実行間隔をミリ秒で指定するオプションです。

デフォルトは「3000」（ミリ秒）で３秒となっている。

hoverPause

カルーセルの項目にカーソルを当てた時に、切り替え処理を停止させるかどうかのオプションです。デフォルトは「true」でカーソルを乗せると一時停止します。

オプション指定

最後にオプションを紹介したいと思います。

Options

サンプル

HTMLコード

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width" />
   <title>Fancybox Gallery demo(5)</title>
   <link
     rel="stylesheet"
     href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css"
   />
   <style type="text/css">
   .carousel .carousel__slide {
       align-items: center;
       background-color: #eee;
       border-radius: 6px;
       display: flex;
       font-size: 2rem;
       height: 12vw;
       justify-content: center;
       margin-right: 6px;
       transition: background .2s,color .2s;
   }
   .carousel.is-small .carousel__slide.is-selected {
       background: #00c8b0;
       color: #fff;
   }
   carousel.is-small .carousel__slide {
       width: 15%;
   }
   .carousel__dots {
     color: red;
   }
</style>
</head>
<body>
   <div id="myCarousel1" class="carousel is-small"></div>
   <div id="myCarousel2" class="carousel is-small" >
      <div class="carousel__slide" style="width:10%">1</div>
      <div class="carousel__slide" style="width:10%">2</div>
      <div class="carousel__slide" style="width:10%">3</div>
      <div class="carousel__slide" style="width:10%">4</div>
      <div class="carousel__slide" style="width:20%">5</div>
      <div class="carousel__slide" style="width:20%">6</div>
      <div class="carousel__slide" style="width:20%">7</div>
   </div>
   <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/carousel.umd.js"></script>
   <script>;
      const myCarousel1 = new Carousel(document.querySelector("#myCarousel1"), {
        slides: [
          { html: "First slide" },
          { html: "Second slide" },
          { html: "Third slide" },
        ],
      });
      const myCarouse2 = new Carousel(document.querySelector("#myCarousel2"), {
            slidesPerPage :2,
            center :false,
            initialPage  :2,
            friction :0.35,
            fill :false,
            infinite:false,
            dragFree :false,
            classNames  : {
               viewport: "carousel__viewport",
               track: "carousel__track",
               slide: "carousel__slide",
               slideSelected: "is-selected", /* 選択時適用されるクラス */
            },
            l10n :{
               NEXT: "次へ",
               PREV: "前へ",
               GOTO: "スライド番号 %d へ移動",
            }
      });
   </script>
</body>
</html>

デモ

デモページ

オプション

オプションを紹介していきます。

slides

スライドの内容を定義できるオプションです。配列で指定し、その内容は「html」オプションでその内容を指定します。

preload

事前に読み込んでおくスライド数を指定できるオプションです。デフォルトは「0」です。

slidesPerPage

ページ単位当たりの表示スライド数を指定できるオプションです。デフォルトは「’auto‘」です。指定は’auto’か、正の整数値を指定してください。

slidesPerPageの例

initialPage

初期表示するページ番号を指定できるオプションです。デフォルトは「0」です。

friction

スライドを切り替える際の速さを定義できるオプションです。デフォルトは「0.92」です。

frictionの例

center

アクティブな（選択済み）のスライドを中央に配置するかどうかを指定できるオプションです。デフォルトは「true」です。

centerの例

infinite

カルーセルのスクロールが最後に達しても最初のスライドに戻ることができるかどうかを指定できるオプションです。デフォルトは「true」で最後のスライドに到達すると最初のスライドに戻ります。

fill

オプション「infiite」が『false』の場合、最初のスライド、または、最後のスライド表示時に、余白を埋めるかどうかのオプションです。デフォルトは「true」で、余計な余白を作らないようにスライド表示されます。

fillの例

dragFree

カルーセルのスライドを好きな位置で止めることができるオプションになります。デフォルトは「false」で好きな位置で停止することはできません。

classNames

カルーセルの様々な要素のクラス名を定義できるオプションです。デフォルトは以下の通りです。

{
  viewport: "carousel__viewport",
  track: "carousel__track",
  slide: "carousel__slide",
  // 表示中のスライドに適用されるクラス
  slideSelected: "is-selected",
}

l10n

代替テキストに設定される文字列を定義できるオプションです。デフォルトは以下の通りです。

{
  NEXT: "Next slide",
  PREV: "Previous slide",
  GOTO: "Go to slide %d",
}

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

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

サンプル

HTMLコード

デモ

実装方法

Fancybox導入

CSSファイルインクルード

JSファイルインルード

HTMLマークアップ

Carousel初期化

スライドショー（自動再生）を有効化

サンプル

HTMLコード

デモ

実装方法

オプション指定

timeout

hoverPause

オプション指定

サンプル

HTMLコード

デモ

オプション

slides

preload

slidesPerPage

initialPage

friction

center

infinite

fill

dragFree

classNames

l10n

ご参考

関連ページ

Related Posts

広告

アーカイブ

カテゴリー

Recent Posts