本記事の内容
プラグインなどを使わず、Nuxt.js（Vue.js）とcss3だけでさくっとスライダーを作る記事です。シンプルな内容なので、Vue.jsと言わず素のJSなどでも似たような処理で作れると思います。
環境
- nuxt.js(2.14.3)
- css3
実装
ImageSlider.vue
<template><divclass="slider"><spanv-for="(image, i) in imagePaths":key="i"><img:class="{ show: currentImageId == i }" :src="image" />
</span></div></template><script>exportdefault{data(){return{currentImageId:0,imagePaths:['./images1.jpg','./images2.jpg','./images3.jpg','./images4.jpg',],}},mounted(){// 5秒ごとに次の画像にsetInterval(()=>{this.changeNextSlide()},5000)},methods:{changeNextSlide(){// 表示するcurrentの画像を変えていくため、加算していくif(this.currentImageId<this.imagePaths.length-1){this.currentImageId+=1}else{this.currentImageId=0}},},}</script><stylelang="scss"scoped>.slider{width:300px;position:relative;span{position:absolute;}span>img{width:100%;opacity:0;// ふわっと表示させるためのアニメーションtransition:all1sease-in-out;// デフォルトではopacity: 0なので表示されない。// currentIndexのものだけopacity: 1にして表示する&.show{opacity:1;}}}</style>ポイント
単純なv-ifにするとDOMが消え、動作として違和感があるため、同じ場所に重ねて画像を表示して、opacityで非表示表示を切り替えています。
あとはcaretをつけて、clickしたらcurrentImageIdを変更する処理などを入れれば、左右で任意に動かすカルーセルなども作れます。
最後に
Vue.jsでカルーセルを使うとなれば、slick.jsやSwiperなど様々なライブラリはあります。
勿論これらのライブラリはやれること（オプション）も多いですが、その分理解して扱うにはドキュメント読むのが大変だったり、ファイル容量も大きかったり、導入したら特定のブラウザやバージョンで動かなかったり、なんてこともあります。
それらのライブラリに比べればシンプルでやれることも少ないですが、簡単な機能だけほしいときに、熟知していないライブラリを使うよりサクッと作っちゃうのもありじゃないかなと思います。