Vue3 ライブラリ「vue3-carousel」を使用してカルーセルを実装する

作成日 2021.03.22
更新日 2021.04.23
Vue.js
Vue3, ライブラリ

ライブラリ「vue3-carousel」を使用して、カルーセルを実装することが可能です。ここでは、vue3-carouselを利用するための手順と簡単な使い方を記述してます。

1. 環境
2. Vue3環境構築
3. vue3-carouselインストール
4. vue3-carousel使い方
5. 起動

環境

OS windows10 64bit
vue 3.0.0
node v14.6.0
yarn 1.22.10
@vue/cli 4.5.9

Vue3環境をwindowsに構築する

Vue3環境構築

vue-cliを使用して構築してます。

npm install -g @vue/cli

npm init

vue upgrade --next

## vueappというプロジェクトを作成
vue create vueapp

cd vueapp

vue3-carouselインストール

yarnを使用して、インストールします。

yarn add vue3-carousel

yarnがインストールされていない場合は、以下のコマンドでインストール可能です。

npm install -g yarn

vue3-carousel使い方

src配下のApp.vueを下記のように編集します。

<template>
  <div class="container">
    <carousel>
      <slide v-for="slide in 10" :key="slide">{{ slide }}</slide>

      <template #addons>
        <navigation />
      </template>
    </carousel>
  </div>
</template>

<script>
import "vue3-carousel/dist/carousel.css";
import { Carousel, Navigation, Slide } from "vue3-carousel";

export default {
  name: "App",
  components: {
    Carousel,
    Slide,
    Navigation,
  },
};
</script>
<style>
.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.carousel__slide {
  padding: 10px;
  min-height: 200px;
  width: 100%;
  background-color: #642afb;
  color: white;
  font-size: 20px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel__prev,
.carousel__next {
  box-sizing: content-box;
  border: 5px solid white;
}
</style>