Vueでカルーセルやスライダーを実装したいときに便利なのが「Vue Carousel」です。
この「vue-carousel」は、Vue.jsのカルーセルやスライダーを実装するためのコンポーネントライブラリになります。
実装方法もシンプルで簡単です。
Vue Carousel
インストール
導入させる方法としてはnpm、yarnでインストールするかcdnのファイルを読み込ませることで使うことができます。
npm
npm install vue-carousel
yarn
yarn add vue-carousel
cdn
<script src="https://cdn.jsdelivr.net/npm/vue-carousel@0.18.0/dist/vue-carousel.min.js"></script>
導入方法
ライブラリの取り込みは下記になります。
import VueCarousel from 'vue-carousel';
cdnで読み込ませる方法
今回はcdnを使う方法を紹介します。
html
<div class="slider-inner">
<carousel :per-page="1" :speed="500">
<slide><img src="https://placehold.jp/300x150.png"></slide>
<slide><img src="https://placehold.jp/300x150.png"></slide>
<slide><img src="https://placehold.jp/300x150.png"></slide>
<slide><img src="https://placehold.jp/300x150.png"></slide>
<slide><img src="https://placehold.jp/300x150.png"></slide>
</carousel>
</div>
オプション設定
Vue Carouselはオプションの設定が可能です。
オプション設定は<carousel>に指定することができます。
よく使うオプションを紹介します。
オプション | 説明 |
:per-page=”1″ | スライダーに表示させる写真の枚数を指定します。 1を指定すると画面上に1枚が表示されます。 |
:speed=”500″ | スライダーの速度(スピード)を設定 |
navigation-prev-label=”戻る” | 戻るボタンを設定 |
navigation-next-label=”次へ” | 次へボタンを設定 |
js
<script>
var app = new Vue({
el: "#app",
components: {
'carousel': VueCarousel.Carousel,
'slide': VueCarousel.Slide,
},
});
</script>
css
Vue Carouselには特にcssは用意されていないので下記を参考に自分で調整しましょう。
.VueCarousel-slide {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
box-sizing:border-box;
}
コメント