Vue｜Simple carousel｜スライドショー｜コードサンプル

この記事ではVueを使ったスライドショーの制御方法や挙動を理解できます。

サンプルコードとイメージを確認しながら実装していきます。

とにかく、やってみることは大切です。フロントエンド開発スキルを上げていきましょう！！

Vueでシンプルスライドショーを実装します！

サンプル

こちらが実装した内容です。コードも確認できます。

See the Pen Untitled by kazukim10 (@kazukim10) on CodePen.

解説

html：

<div id="app">
    <transition-group tag="div" :name="transitionType" class="slides-group">
        <div v-if="show" :key="current" class="slide" :class="slides[current].className">
          <p>{{ slides[current].className }}!</p>
        </div>
    </transition-group>
    <div class="btn btn-prev" aria-label="Previous slide" @click="slide(-1)">
        &#10094;
    </div>
    <div class="btn btn-next" aria-label="Next slide" @click="slide(1)">
        &#10095;
    </div>
</div>

・<transition-group></transition-group>でスライド要素にアニメーション、スタイルを適用する

参考URL：https://ja.vuejs.org/guide/built-ins/transition-group.html

・<div ・・・ @click="slide(-1)">でクリックイベント時にスライドさせる関数を適用

まとめ

Vueを使ってシンプルなスライドショーを実装しました。

参考になれば幸いです。