Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8691

【Vue.js】Vue.jsとcssアニメーションで作るスライドショー

$
0
0

Vue.jsCSSを用いてスライドショーを実装するメモです。

目的

スライド画像.gif
上記のようなシンプルなスライドショーを実装します。

実装

テンプレート

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-showv-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-totransitionによってVueから自動的に付与されるクラスです。

まとめ

Vue.jsとCSSを使用したスライドショーの実装方法について簡単に説明してみました。私はこのように実装しましたが、おそらく別の方法もあるかと思います。いろいろ試してみてください!


Viewing all articles
Browse latest Browse all 8691

Latest Images

Trending Articles