vuejs image carousel using transition component and composition api in javascript

<template>
  <div class="carousel-container">
    <transition name="fade">
      <img :src="currentImage" :key="currentImage" class="carousel-image">
    </transition>
    <div class="carousel-buttons">
      <button @click="previousImage">Previous</button>
      <button @click="nextImage">Next</button>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const images = [
      'https://via.placeholder.com/500x500?text=Image+1',
      'https://via.placeholder.com/500x500?text=Image+2',
      'https://via.placeholder.com/500x500?text=Image+3'
    ];

    const currentImageIndex = ref(0);

    const currentImage = computed(() => {
      return images[currentImageIndex.value];
    });

    const previousImage = () => {
      currentImageIndex.value--;
      if (currentImageIndex.value < 0) {
        currentImageIndex.value = images.length - 1;
      }
    };

    const nextImage = () => {
      currentImageIndex.value++;
      if (currentImageIndex.value >= images.length) {
        currentImageIndex.value = 0;
      }
    };

    return {
      currentImage,
      previousImage,
      nextImage
    };
  }
};
</script>

<style>
.carousel-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
}

.carousel-image {
  width: 500px;
}

.carousel-buttons {
  display: flex;
  justify-content: space-evenly;
  margin-top: 1rem;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
1558 chars
81 lines