Zenn
👉

Nuxt 3でSwiper Elementを試した

2024/03/30に公開
#
swiper
Nuxt 3
tech

プロジェクトフォルダを作成する

適当に「nuxt3-swiper-element」をつくって試す。

/nuxt3-swiper-element
npx nuxi@latest init .

質問に答える。

# 今回はnpmを使う
✔ Which package manager would you like to use?
npm

# はじめての場合はでるかも？
✔ Are you interested in participating?
No

# Gitリポジトリの初期化は今回どうでもいい
✔ Initialize git repository?
No

Swiperを導入する

https://swiperjs.com/get-started

swiperをインストールする。

/nuxt3-swiper-element
npm i swiper

以下の記事を参考にnuxt.config.tsでカスタム要素を指定しておく。
https://qiita.com/sankero/items/6cf5124685936ddae3c9

使ってみる

/nuxt3-swiper-element/app.vue
<script setup lang="ts">
// カスタム要素を読み込む
import { register } from 'swiper/element/bundle';
register();
</script>

<template>
  <!--
    オプションはswiper-containerに渡す。
    ナビゲーションやブレイクポイントなどは、
    JSON.stringify()にオブジェクトを渡したらうまくいった。
  -->
  <swiper-container
    loop="false"
    speed="600"
    slides-per-view="1.5"
    space-between="20"
    :navigation="JSON.stringify({
      nextEl: '#sampleSwiperNext',
      prevEl: '#sampleSwiperPrev'
    })"
    :breakpoints="JSON.stringify({
      641: {
        slidesPerView: 2.5
      }
    })"
    id="sampleSwiper"
  >
    <swiper-slide>
      <img src="~/assets/img/1.jpg" alt="" />
    </swiper-slide>

    <swiper-slide>
      <img src="~/assets/img/2.jpg" alt="" />
    </swiper-slide>

    <swiper-slide>
      <img src="~/assets/img/3.jpg" alt="" />
    </swiper-slide>

    <swiper-slide>
      <img src="~/assets/img/4.jpg" alt="" />
    </swiper-slide>
  </swiper-container>

  <!-- 今回は適当にスライドボタンを自前で用意 -->
  <div :class="$style.buttons">
    <button type="button" id="sampleSwiperPrev">
      Prev
    </button>

    <button type="button" id="sampleSwiperNext">
      Next
    </button>
  </div>
</template>

<style module>
  img {
    width: 100%;
  }

  .buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
  }
</style>

実行する。

/nuxt3-swiper-element
npm run dev

確認できた。

おまけ

よくある「左右に余白つけたい」は、Shadow DOMにスタイルを指定したらできた。

/nuxt3-swiper-element/app.vue
...
<style scoped>
  #sampleSwiper::part(container) {
    width: calc(100% - 100px * 2);
    padding: 0 100px;
  }
</style>

Discussion