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

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

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

環境

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

プロジェクト作成

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

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

vue-carouselインストール

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

vue-carousel使い方

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

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

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

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

per-page=”2″ に変更すると、下記のように2つブロックが表示されます。