Shoelace

「Shoelace」でカルーセル（Carousel）を作成する方法

2023年4月20日 by single コメントはまだありません

「Shoelace」でカルーセル（Carousel）を作成する方法

今回は「Shoelace」の『sl-carousel』と『sl-carousel-item』タグに紹介です。

タグ「<sl-carousel>」

タグ「<sl-carousel-item>」

デモ

導入方法

JSファイルインクルード

「Carousel」は「Shoelace 2.4」の現時点では「Shoelace 2.2」から実装された、まだ『experimental』（実験中）の機能ですので、全体のJSファイルにはサポートされてはおらず、個別にJSファイルを読み込む必要があります。

<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.4.0/dist/components/carousel/carousel.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.4.0/dist/components/carousel-item/carousel-item.js"></script>

CSSファイルインクルード

「Shoelace」のCSSファイルをインクルードします。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0/dist/themes/light.css" />

HTMLマークアップ

まず、タグ「<sl-carousel>」でカルーセルを定義します。

<sl-carousel>
  ...
</sl-carousel>

次にこのカルーセル領域に、カルーセルの各項目（スライド）を「<sl-carousel-item>」タグで定義していきます。

<sl-carousel>
  <sl-carousel-item>
    ...
  </sl-carousel-item>
  ...
</sl-carousel>

最後に「<sl-carousel-item>」タグ内にイメージやラベルなどを設定してください。

ここではイメージを設定します。

<sl-carousel>
  <sl-carousel-item>
    <img src="(画像URI)" />
  </sl-carousel-item>
  ...
</sl-carousel>

ただ、これで表示させると、各カルーセル項目を切り替えることができません。「<sl-carousel>」タグ内に属性を設定する必要があります。どのような属性がありどのようなカルーセルを作ることができるかサンプルをお見せしたいきたいと思います。

ページネーション（Pagination）

サンプル

レッサーパンダ カピパラ ペンギン フクロウ トド

HTMLコード

<sl-carousel pagination>
  <sl-carousel-item>
    <img
      alt="レッサーパンダ"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06344.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="カピパラ"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07591.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="ペンギン"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07708.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="フクロウ"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC02046.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="トド"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06120_2.jpg"
    />
  </sl-carousel-item>
</sl-carousel>

属性「pagination」を設定すると、スライドの下に〇アイコンが設定され、それをクリックすることでカルーセル項目を切り替えることができるようになります。

ナビゲーション（navigation）

サンプル

レッサーパンダ カピパラ ペンギン フクロウ トド

HTMLコード

<sl-carousel navigation>
  <sl-carousel-item>
    <img
      alt="レッサーパンダ"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06344.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="カピパラ"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07591.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="ペンギン"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07708.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="フクロウ"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC02046.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="トド"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06120_2.jpg"
    />
  </sl-carousel-item>
</sl-carousel>

属性「navigation」を設定すると、ナビゲーションボタン（「＞」（次へ）アイコンと「＜」（前へ）アイコン）が表示され、それをクリックすることでカルーセル項目を移動させることができます。

ループ（loop）：繰り返し

サンプル

レッサーパンダ カピパラ ペンギン フクロウ トド

HTMLコード

<sl-carousel loop navigation>
  <sl-carousel-item>
    <img
      alt="レッサーパンダ"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06344.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="カピパラ"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07591.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="ペンギン"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07708.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="フクロウ"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC02046.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="トド"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06120_2.jpg"
    />
  </sl-carousel-item>
</sl-carousel>

属性「loop」を設定すると、最終項目の後に、次の項目を切り替えた際、最初の項目に戻ります。また、最初の項目から前の項目を表示させようとすると、最後の項目に移動します。

自動再生（autoplay）

サンプル

レッサーパンダ カピパラ ペンギン フクロウ トド

HTMLコード

<sl-carousel loop autoplay autoplay-interval="1000" >
  <sl-carousel-item>
    <img
      alt="レッサーパンダ"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06344.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="カピパラ"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07591.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="ペンギン"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07708.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="フクロウ"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC02046.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="トド"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06120_2.jpg"
    />
  </sl-carousel-item>
</sl-carousel>

属性「autoplay」を設定し、かつ、「autoplay-interval」でスライドの表示時間をミリ秒で設定するとこで自動再生を実装できます。

マウスドラッグ

サンプル

スライドをドラッグしてください レッサーパンダ カピパラ ペンギン フクロウ トド

HTMLコード

<sl-carousel mouse-dragging>
  <sl-carousel-item>
    <img
      alt="レッサーパンダ"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06344.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="カピパラ"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07591.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="ペンギン"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07708.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="フクロウ"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC02046.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="トド"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06120_2.jpg"
    />
  </sl-carousel-item>
</sl-carousel>

属性「mouse-dragging」を設定すると、スライドをマウスでドラッグすると、スライドを切り替えることができるようになります。

表示件数２件

カルーセルに表示させる件数も変更することができます。ここでは２件のサンプルとします。

レッサーパンダ カピパラ ペンギン フクロウ トド

HTMLコード

<sl-carousel slides-per-page=2 navigation>
  <sl-carousel-item>
    <img
      alt="レッサーパンダ"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06344.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="カピパラ"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07591.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="ペンギン"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07708.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="フクロウ"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC02046.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="トド"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06120_2.jpg"
    />
  </sl-carousel-item>
</sl-carousel>

属性「slides-per-page」にカルーセルに表示させたいスライド数を設定することができます。

２件ごとに移動

サンプル

ナビゲーションボタンを押すことでスライドを移動させることができますが、ナビゲーションボタンを押したときに移動させるスライド数も変更することができます。ここでは２件移動させるサンプルです。

レッサーパンダ カピパラ ペンギン フクロウ トド

HTMLコード

<sl-carousel slides-per-move=2 loop navigation>
  <sl-carousel-item>
    <img
      alt="レッサーパンダ"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06344.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="カピパラ"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07591.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="ペンギン"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07708.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="フクロウ"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC02046.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="トド"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06120_2.jpg"
    />
  </sl-carousel-item>
</sl-carousel>

属性「slides-per-move」にナビゲーションボタンを押したとき移動するスライド数を定義できます。

縦カルーセル

サンプル

レッサーパンダ カピパラ ペンギン フクロウ トド

HTMLコード

<style>
  .vertical {
    max-height: 640px; /* 写真の高さに合わせて調整してください */
  }
  .vertical::part(base) {
    grid-template-areas: 'slides slides pagination';
  }
  .vertical::part(pagination) {
  }
  .vertical::part(navigation) {
    transform: rotate(90deg); 
    display: flex;
  }
</style>
<sl-carousel class="vertical" orientation="vertical" loop pagination>
  <sl-carousel-item>
    <img
      alt="レッサーパンダ"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06344.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="カピパラ"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07591.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="ペンギン"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07708.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="フクロウ"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC02046.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="トド"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06120_2.jpg"
    />
  </sl-carousel-item>
</sl-carousel>

属性「orientation」に『vertical』を設定すると、縦のカルーセルになります。

ただ、ページネーションボタンは縦にならないので、自前でカスタマイズする必要があります。

そこで「<style>」タグを使い、CSSクラスを作り、ページネーションボタンを縦に並べています。

サムネイル付

サンプル

レッサーパンダ カピパラ ペンギン フクロウ トド
Thumbnail by 1 Thumbnail by 2 Thumbnail by 3 Thumbnail by 4 Thumbnail by 5

HTMLコード

<sl-carousel class="carousel-thumbnails" navigation loop >
  <sl-carousel-item>
    <img
      alt="レッサーパンダ"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06344.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="カピパラ"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07591.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="ペンギン"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07708.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="フクロウ"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC02046.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="トド"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06120_2.jpg"
    />
  </sl-carousel-item>
</sl-carousel>
<div class="thumbnails">
  <div class="thumbnails__scroller">
    <img alt="Thumbnail by 1" class="thumbnails__image active" src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06344.jpg" />
    <img alt="Thumbnail by 2" class="thumbnails__image" src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07591.jpg" />
    <img alt="Thumbnail by 3" class="thumbnails__image" src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07708.jpg" />
    <img alt="Thumbnail by 4" class="thumbnails__image" src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC02046.jpg" />
    <img alt="Thumbnail by 5" class="thumbnails__image" src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06120_2.jpg" />
  </div>
</div>


<style>
  .carousel-thumbnails {
    --slide-aspect-ratio: 3 / 2;
  }

  .thumbnails {
    display: flex;
    justify-content: center;
  }

  .thumbnails__scroller {
    display: flex;
    gap: var(--sl-spacing-small);
    overflow-x: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
    scroll-padding: var(--sl-spacing-small);
  }
  .thumbnails__scroller::-webkit-scrollbar {
    display: none;
  }
   /* サムネイルのサイズ定義 */
  .thumbnails__image {
    width: 96px;
    height: 60px;
    object-fit: cover;
    opacity: 0.3;
    will-change: opacity;
    transition: 250ms opacity;
    cursor: pointer;
  }
  .thumbnails__image.active {
    opacity: 1;
  }
</style>
<script>
  {
    const carousel = document.querySelector('.carousel-thumbnails');
    const scroller = document.querySelector('.thumbnails__scroller');
    const thumbnails = document.querySelectorAll('.thumbnails__image');
    /*サムネイルクリック時の処理 */
    scroller.addEventListener('click', e => {
      const target = e.target;

      if (target.matches('.thumbnails__image')) {
        const index = [...thumbnails].indexOf(target);
        carousel.goToSlide(index);
      }
    });
    /* カルーセル変更時の処理 */
    carousel.addEventListener('sl-slide-change', e => {
      const slideIndex = e.detail.index;
      [...thumbnails].forEach((thumb, i) => {
        thumb.classList.toggle('active', i === slideIndex);
        if (i === slideIndex) {
          thumb.scrollIntoView({
            block: 'nearest'
          });
        }
      });
    });
  }
</script>

「Shoelace」の「<sl-carousel>」「<sl-carousel-item>」タグには、サムネイル付きカルーセルの機能はありません。

よって、自作する必要があります。

「<style>」タグや「<script>」タグを用いて、コードを追加することで、サムネイル付きのカルーセルも実装できます。

アスペクト比（１対１）

サンプル

レッサーパンダ カピパラ ペンギン フクロウ トド

HTMLコード

<sl-carousel navigation pagination style="--aspect-ratio: 1/1;">
  <sl-carousel-item>
    <img
      alt="レッサーパンダ"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06344.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="カピパラ"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07591.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="ペンギン"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07708.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="フクロウ"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC02046.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="トド"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06120_2.jpg"
    />
  </sl-carousel-item>
</sl-carousel>

CSSのカスタムプロパティ「–aspect-ratio」を利用することでアスペクト比を変更することができます。

表示エリアの余白付

サンプル

レッサーパンダ カピパラ ペンギン フクロウ トド

HTMLコード

<sl-carousel navigation pagination style="--scroll-hint: 10%;">
  <sl-carousel-item>
    <img
      alt="レッサーパンダ"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06344.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="カピパラ"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07591.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="ペンギン"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07708.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="フクロウ"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC02046.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="トド"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06120_2.jpg"
    />
  </sl-carousel-item>
</sl-carousel>

CSSのカスタムプロパティ「–scroll-hint」を利用することで表示エリアに余白を設定し、隣のスライドが見えるようになります。

スライド間の余白無し

サンプル

レッサーパンダ カピパラ ペンギン フクロウ トド

HTMLコード

<sl-carousel navigation pagination style="--slide-gap:0px;">
  <sl-carousel-item>
    <img
      alt="レッサーパンダ"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06344.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="カピパラ"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07591.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="ペンギン"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07708.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="フクロウ"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC02046.jpg"
    />
  </sl-carousel-item>
  <sl-carousel-item>
    <img
      alt="トド"
      src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06120_2.jpg"
    />
  </sl-carousel-item>
</sl-carousel>

CSSのカスタムプロパティ「–slide-gap」はスライド間の余白を定義できるプロパティです。0pxを指定するとスライド間に余白のないカルーセルになります。

ご参考

関連記事