Vue.js vue-carouselを使用してスクロール機能を実装する

作成日 2020.01.18
更新日 2020.07.21
Vue.js
vue-carousel, Vue.js

vueのライブラリである「vue-carousel」を利用すると、簡単にスクロール機能が実装することが可能。

1. 環境
2. プロジェクト作成
3. vue-carouselインストール
4. vue-carousel使い方

環境

OS CentOS 8.0.1905 (Core)
node v12.13.1
npm 6.13.2
@vue/cli 4.1.1

プロジェクト作成

carousel-testという名前でプロジェクトを作成してます。

vue create carousel-test

作成時は、defaultを選択してます

Vue CLI v4.1.1? Please pick a preset: default (babel, eslint)

vue-carouselインストール

vue-carouselをインストールします

## プロジェクトに移動
cd carousel-test

## インストール
npm i -S vue-carousel

vue-carousel使い方

とりあえず、テキストデータをスライドさせてみます。

src配下のmain.jsを下記の通りに編集します

import Vue from 'vue'
import App from './App.vue'
import VueCarousel from 'vue-carousel';

Vue.use(VueCarousel);
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

src/components配下のHelloWorld.vueを下記の通りに編集します。

<template>
  <carousel :per-page="1">
    <slide>
      <div class="slide-item">
      Slide 1
      </div>
    </slide>
    <slide>
      <div class="slide-item">
      Slide 2
      </div>
    </slide>
    <slide>
      <div class="slide-item">
      Slide 3
      </div>
    </slide>
  </carousel>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.slide-item {
  height: 200px;
  width: 500px;
  background-color: #3FB811; 
  display: flex;
  margin:  0 auto; 
  justify-content: center; 
  align-items: center; 
  color: #fff;  
  font-size: 35px; 
  border-radius: 20px;
}
</style>

ブラウザから http://プライベートIP:8080 にアクセスするとスライドが実装されていることが確認できます。