Vue3-carouselでfade-Animationを実装する方法 #Vue.js

概要

Vueでカルーセルの実装をしようとした時のことでした。
Vue3-carouselで実装しているけどもfadeアニメーションは標準で実装されていないため、少し手を加えて実装する必要があります。その手順を備忘録として残しておきます。

経緯

ーーーーーーーーーーーーーーー
Swiper「Swiper Vue コンポーネントは将来のバージョンで削除される可能性があります。」

Vue-slick「Vue3には対応してません」
ーーーーーーーーーーーーーーー

というような状況だったため今回はVue3-carouselを使用することを決定しました。
もう一つvue-carouselもVue3に対応していました。
他にVue3で使用できるカルーセルのライブラリ等があれば教えていただきたいです。

先に実際のコードと実装例

サンプルページを作りました

Slider.vue

<script setup lang="ts">
import { Carousel, Slide } from "vue3-carousel";
import { Sliders } from "@/data/sliders";
import "vue3-carousel/dist/carousel.css";
</script>

<template>
  <Carousel :autoplay="4000" :itemsToShow="1" :wrapAround="true" :transition="0">
    <Slide v-for="slide in Sliders" :key="slide.id">
      <img :src="slide.src" :alt='`${slide.id}枚目の写真`' />
    </Slide>
  </Carousel>
</template>

<style scoped>
.carousel__slide img {
  opacity: 0;
}
.carousel__slide.carousel__slide--active img {
  opacity: 1;
  transition: 0.75s;
}
</style>

満たすべき条件

<Carousel :transition="0">のように:transition="0"を設定する
→スライドしている動きが入らないようにするため
※ サンプルページではカスタマイズできるようにしているので、:transitionは0でなくとも動き的に好みのものを使用しましょう
　
opacity: 0; → opacity: 1;をCSSで指定する
→fade-inさせるため

カスタム

・fadeの速度

<style scoped>
.carousel__slide img {
 opacity: 0;
}
.carousel__slide.carousel__slide--active img {
 opacity: 1;
 /* transitionの値でfadeの速度を好きな速度に変えられます */
 transition: 0.75s;
}
</style>

　↓　その他のVue3-carouselのオプション、カスタムに関してはこちら

まとめ

標準でanimation fadeなどを用意してくれているカルーセルのライブラリもありますが、用意されていない場合は同様の手順で解決できそうです。カルーセルやスライダーは自分で実装することはあまりないと思いますので、自由にカスタマイズできる方法を知っておくと便利だと思いました。