Vue.jsでカルーセルスライダー実装してみた
以前Vue.jsによるタブ切り替えの実装を紹介しましたが、Vue.jsではカルーセルスライダーも簡単に実装する事ができます。
今回は「Vue Carousel」を使ってカルーセルスライダーを実装してみます。
「Vue Carousel」とは
jQueryのslick.jsのように簡単にカルーセルスライダーを導入できるプラグインです。
導入は、npmコマンドで導入する方法とCDNより読み込む方法があります。
今回はCDNで簡易的に導入します。
See the Pen VwZWJQx by YusukeIkeda (@YusukeIkeda) on CodePen.
CSS
Vue Carouselを導入してブラウザのコンソールよりで要素を確認すると.VueCarousel-slideというクラスが生成されているのが分かります。今回はそのclassにCSSを適用します。
.VueCarousel-slide {
font-size:12px;
display: flex;
align-items: center;
justify-content: center;
height:100px;
background:#ccc;
border-right:1px solid #FFF;
box-sizing:border-box;
}
上記CSSを適用したクラスについてはコンソールにて確認する事ができます。
<div class="VueCarousel">
<div class="VueCarousel-wrapper">
<div class="VueCarousel-inner" style="transform: translate(0px, 0px); transition: transform 0.5s ease 0s; flex-basis: 514.5px; visibility: visible; height: auto;">
<!--VueCarousel-slideというクラスが動的に生成されている事が確認できる-->
<div tabindex="-1" aria-hidden="true" role="tabpanel" class="VueCarousel-slide">Slide 1</div>
<div tabindex="-1" aria-hidden="true" role="tabpanel" class="VueCarousel-slide">Slide 2</div><div tabindex="-1" aria-hidden="true" role="tabpanel" class="VueCarousel-slide">Slide 3</div>
</div>
</div>
<div data-v-438fd353="" class="VueCarousel-pagination" style="">
<div data-v-438fd353="" role="tablist" class="VueCarousel-dot-container" style="margin-top: 20px;">
<button data-v-438fd353="" aria-hidden="false" role="tab" title="Item 0" value="Item 0" aria-label="Item 0" aria-selected="true" class="VueCarousel-dot VueCarousel-dot--active" style="margin-top: 20px; padding: 10px; width: 10px; height: 10px; background-color: rgb(0, 0, 0);">
</button>
<button data-v-438fd353="" aria-hidden="false" role="tab" title="Item 1" value="Item 1" aria-label="Item 1" aria-selected="false" class="VueCarousel-dot" style="margin-top: 20px; padding: 10px; width: 10px; height: 10px; background-color: rgb(239, 239, 239);">
</button>
</div>
</div>
</div>
HTML
<!DOCTYPE html>
<html>
<head>
<title>vue-carousel</title>
<link rel="stylesheet" type="text/css" href="slide.css">
</head>
<body>
<div id="app">
<carousel>
<slide>Slide 1</slide>
<slide>Slide 2</slide>
<slide>Slide 3</slide>
</carousel>
</div>
<!-- Vue.jsをCDNで読み込む -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<!-- vue-carousel.jsをCDNで読み込む -->
<script src="https://cdn.jsdelivr.net/npm/vue-carousel@0.18.0/dist/vue-carousel.min.js"></script>
<script src="slide.js"></script>
</body>
</html>
JavaScript
下記は特にオプションを指定しない場合の設定です。
var app=new Vue({
el: "#app",
components: {
'carousel': VueCarousel.Carousel,
'slide': VueCarousel.Slide
},
});
よく使いそうなオプション
自動再生
カルーセルスライダーを自動再生させたい場合はautoplay="true"を付与するだけでＯＫです。
次のスライドに移るタイミングは:autoplayTimeout="1000"で設定します。
デフォルト値は2000となっており、値を小さくするほど次のスライドへ移る時間が短くなります。
ループ再生
カルーセルスライダーをループ再生させたい場合は:loop="true"を指定します。
デフォルト値はfalseとなっております。
スライドのスピード
スライドの速度を指定する場合はは:speed="500"を指定します。
デフォルト値は500となっており、値を小さくするほどスピードは速くなります。
<carousel :autoplay="true" :autoplayTimeout="1000" :loop="true" :speed="500">
<slide>Slide 1</slide>
<slide>Slide 2</slide>
<slide>Slide 3</slide>
</carousel>
まとめ
CDNを読み込んでから数十分でカルーセルスライダーを作ることができました。
Vueに移行した際もこういったアニメーション要素のあるUIは心配なさそうです。
また他にも色々なオプションがgitHubで確認することができるので、ほとんどの案件で対応できるかと思います。