Izanagi's site

Nuxtでカルーセルを実装させる方法！「vue-carousel」

みなさんこんにちは！
イザナギです。
最近またWebページを作成しているので、その時に使っていたツールをまた紹介したいと思います！
その名も「vue-carousel」
なんと！Vue・Nuxtにおいてカルーセルを簡単に実装できるようにできるツールです。
しかも使い方も簡単！では、早速使ってみましょう。

導入の仕方

インストール

まずは、「vue-carousel」をインストールしましょう。
プロジェクトに移動したら下記を入力し実行します。


npm install --save vue-carousel

これでライブラリはダウンロードされます。

「vue-carousel.js」ファイルの作成

プラグインを反映させるために「vue-carousel.js」をプロジェクト内の「plugins」フォルダに作成し、以下のコードを保存しておきます。


import Vue from 'vue'import VueCarousel from 'vue-carousel'Vue.use(VueCarousel)

nuxt.config.jsに記述

先ほど作成したファイルを読み込ませるために、「nuxt.config.js」にも設定を追加しておきます。
「nuxt.config.js」内の「plugins」の箇所に以下を記述します。


plugins: [{
    src: '~/plugins/vue-carousel',
    ssr: false
  },

これで、「vue-carousel」を使えるようになりました！

実装例

では、早速実装してみましょう！
「vue-carousel」を実際に使うにはファイルに「vue-carousel」の機能をインポート しなければなりませんのでscriptタグ内に以下を記述。


import Carousel from 'vue-carousel/src/Carousel.vue'
import Slide from 'vue-carousel/src/Slide.vue'

export default {
  components: {
    Carousel,
    Slide
  },
}

これを使って今回は複数の写真を使って自動で切り替わるオプションをつけて実装してみました。
詳しいオプションの使い方はこちら！
API - Vue Carousel


<template>
  <div class="box">
    <carousel
      :per-page="1"
      :autoplay="true"
      :loop="true"
      :pagination-padding="5"
      :autoplay-timeout="4000"
      >
      <slide v-for="imageurl in imageurls">
        <v-img
          :src="imageurl"
          max-height="400px">
        </v-img>
      </slide>
    </carousel>
    <div class="title_text">
      Green Pearl<br>「Osima Island」
    </div>
  </div>
</template>

<script>
import Carousel from 'vue-carousel/src/Carousel.vue'
import Slide from 'vue-carousel/src/Slide.vue'

export default {
  components: {
    Carousel,
    Slide
  },
  data () {
    return{
      imageurls: [
        require('@/assets/img/templete1_logo1.png'),
        require('@/assets/img/templete1_logo2.png'),
        require('@/assets/img/templete1_logo3.png'),
        require('@/assets/img/templete1_logo4.png'),
        require('@/assets/img/templete1_logo5.png'),
      ],
    }
  }
}
</script>

<style>
.box {
  position: relative;
}

.title_text {
  /* 画像の上に文字を載せる（中央） */
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  text-align: center;
  margin:0;
  padding:0;

  /* テキストの調整 */
  color: white;
  font-size: 6vw;
  /* Google Fonts */
  font-family: 'Playfair Display', serif;
}
</style>

まとめ

今回は簡単にカルーセルを実装できる「vue-carousel」を紹介してみました。
実装に手間がかからないのがいいですよね。
もし気になりましたら使ってみてください！
それでは今回はここで筆を置かせていただきます！
最後まで記事をご覧いただきありがとうございました！

2025 - Izanagi's Site