nuxt3でswiperを使ってカルーセル(スライダー)を作る

運営者:そうすけ

愛媛のエンジニア兼ブロガー。
工場勤務→社内SE→自社開発にキャリアチェンジ。
主にバックエンド開発を行っています。

【ブログ運営歴】2021.6~
【プログラミング歴】2022.3~

本業:Java,MySQL、個人:Typescript

nuxt3で外部モジュールでカルーセルを実装するのに苦労したので記載します。

目次

背景

Nuxt.jsでスライダーを使用する方法を検索すると、vue-awesome-swiperSwiper Vue.js Componentsの使用手順が多く紹介されています。

しかし、使用が非推奨(deprecated)となっており、最終的にはSwiper Elementの使用を推奨と促されます。

本記事では、Swiper ElementをNuxt3で使用する手順を簡単にまとめています。

手順

インストール

npm install swiper

nuxt.config.jsに記載

export default defineNuxtConfig({
  ...,
  vue: {
    compilerOptions: {
      isCustomElement: (tag) => /^(swiper|swiper-slide|swiper-container)$/.test(tag),
    },
  },
})

app.vueに記載して確認

<script setup>
import { register } from 'swiper/element/bundle';
register();

</script>

<template>
    <swiper-container>
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
    </swiper-container>
</template>
自作サウナアプリのカルーセル実装

オプションでnavigationなどを入れないと矢印やポジションが出てこないです。

<script setup>
import { register } from 'swiper/element/bundle';
register();

</script>

<template>
    <swiper-container  
    navigation="true" 
        pagination="true" 
        scrollbar="true"
   >
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
    </swiper-container>
</template>

公式ドキュメントに詳しいプロパティが書いてあるので見ながら実装すると好みに作れるはずです😊

参考記事

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

目次