Vue.js
とCSS
を用いてスライドショーを実装するメモです。
目的
実装
テンプレート
Imageslide.vue
<template><div><transition-grouptag="ul"class="images"><liv-for="(image, index) in demoimages"v-show="currentImage == index + 1":key="index"><img:src="image.image"alt=""/></li></transition-group></div></template>
画像をv-for
でリストしてv-show
で表示を切り替えています。v-show
はv-if
とは違い、DOMを消したり追加したりはせず、display:none
を付与して要素を非表示にします。そのため非表示の画像をもう一度表示する場合も、再度画像が読み込まれるわけではありません。
スクリプト
Imageslide.vue
<script>exportdefault{data(){return{currentImage:1,}},computed:{demoimages(){return[{image:'/images/1.jpg'},{image:'/images/2.jpg'},{image:'/images/3.jpg'},]},},watch:{currentImage(){this.autoSlide()},},mounted(){this.autoSlide()},methods:{asyncautoSlide(){constwait=(ms)=>newPromise((resolve)=>setTimeout(()=>resolve(),ms))awaitwait(2000)if(this.currentImage>this.images.length-1){this.currentImage=1}else{this.currentImage++}},},}</script>
表示されている画像のインデックスを示すcurrentImage
をウォッチしてautoSlide()
を実行しています。currentImageが画像のリストを超えた場合に初期化することで無限ループになります。
スタイル
Imageslide.vue
<stylelang="scss"scoped>.images{width:100%;height:100%;padding:0;margin:0;position:relative;li{width:100%;height:100%;max-height:627px;position:absolute;top:0;left:0;}}img{width:100%;height:100%;max-height:627px;margin:auto;z-index:2;}.v-enter-active,.v-leave-active{transition:opacity0.5s;}.v-enter,.v-leave-to{opacity:0;}</style>
リストの親要素にposition:relative
を指定し、子要素にposition:absolute top:0 left:0
を指定することで同じ位置に画像を重ねることができます。.v-enter-active,.v-leave-active,.v-enter,.v-leave-to
はtransition
によってVueから自動的に付与されるクラスです。
まとめ
Vue.jsとCSSを使用したスライドショーの実装方法について簡単に説明してみました。私はこのように実装しましたが、おそらく別の方法もあるかと思います。いろいろ試してみてください!