還暦過ぎたエンジニアの挑戦

いくつになっても好奇心だけは忘れないエンジニア Hikaruのブログ

MENU

Vue.jsで超簡単ベーシックスライドショーを作った

Vue.jsの良さにやっと気付いてきた感のあるHikaruです。

スライドショーって意外と面倒なものと
レッテルを貼ってなんとなく避けてきましたが、
(あ、正確にはそのあたりはデザイナーさんの範疇なので
あまり携わったことがないということです💦)
Vue.jsのv-bindを使えば簡単なんじゃないの?

と思い立ったので、ちょっと作ってみました。


散歩の途中で

使った写真はhikaruが散歩の途中で撮ったものから適当にピックアップして使いましたが、すごく簡単に実装できるように作れてびっくり(゚д゚)!

初心者向きにできました。

でも、こんな風にコードをシンプルに整理するまでには紆余曲折が。。。

特にv-forというのをフィルタをかけて使う
というところにたどり着くのにけっこういろいろ勉強しました。😅


超簡単ベーシックスライドショーのコード

使用するには↓を展開してコピーしてください。
そのままでもサンプルスライドショーが動作します。

超簡単ベーシックスライドショーのコード

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<style>
    /* transition style*/
    .slide1-enter-active,
    .slide1-leave-active {
        transition: all 1s ease;
    }

    .slide1-enter,
    .slide1-leave-to {
        opacity: 0;
    }
</style>

<div>
    <div id="slide1" :style="slide1Style">
        <transition name="slide1">
            <div class="slider-inner" v-for='slide in slides[idx]' :key="idx">
                <img :src="imgBathPath + slides[idx].img" :style="slideImage">
            </div>
        </transition>
    </div>
</div>

<script>
    let imgBathPath = 'https://cdn.yutenji.biz/img/slide/';// 画像を保存してあるフォルダ
    let slide1 = new Vue({
        el: '#slide1',
        data: {
            idx: 0,
            slide1Style: {
                position: 'relative',
                width: '600px', // スライドショーの横幅
                height: '450px', // スライドショーの高さ
                overflow: 'hidden',
            },
            slideImage: {
                position: 'absolute',
                width: '100%', // スライドショーの横幅に合わせて画像のサイズが調整されます
                top: '0',
                left: '0',
            },
            slides: [{
                    img: 'IMG_0742.png' // 画像の名前1
                },
                {
                    img: 'IMG_0622.jpg' // 画像の名前2
                },
            ],
        },
        mounted() {
            setInterval(() => {
                this.idx = this.idx < this.slides.length - 1 ? this.idx + 1 : 0;
            }, 3500) // 1枚のスライドの表示時間の調整はこの数字、既定は3.5秒にしてあります
        }
    })
</script>


自分用にアレンジするポイント

コード中にコメントを入れてあるところがポイントです。

  • 「画像を保存してあるフォルダ」は間違いのないように変更してください。
  • 「スライドショーの横幅」「 スライドショーの高さ」は適宜変更してください。
  • 画像の名前は、「画像を保存してあるフォルダ」の中にあるスライドショーに使用する画像の名前を列挙すればOKです。
    2枚だけサンプルで記述してあります。
  • 「1枚のスライドの表示時間」は既定で3.5秒にしてあります。
    変更するときはミリ秒単位の数字で。
  • スライド間のトランジション*1 は、シンプルにフェードアウト、フェードインにしてあります。トランジションの変更についてはまた折を見て。
Hikaru

*1:スライドが切り替わるときの、切り替わり方の効果のことです