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

npm install --save vue-carousel

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

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

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

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

<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」を紹介してみました。
実装に手間がかからないのがいいですよね。
もし気になりましたら使ってみてください！
それでは今回はここで筆を置かせていただきます！
最後まで記事をご覧いただきありがとうございました！