vuejs image carousel using transition component in javascript

index.tsx
<template>
  <div class="carousel">
    <transition name="slide">
      <img v-bind:src="currentImage" key="currentImage">
    </transition>
    <button @click="previousImage">Previous</button>
    <button @click="nextImage">Next</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        "https://example.com/image1.jpg",
        "https://example.com/image2.jpg",
        "https://example.com/image3.jpg",
        "https://example.com/image4.jpg",
      ],
      currentIndex: 0,
    };
  },
  computed: {
    currentImage() {
      return this.images[this.currentIndex];
    },
  },
  methods: {
    previousImage() {
      this.currentIndex =
        (this.currentIndex + this.images.length - 1) % this.images.length;
    },
    nextImage() {
      this.currentIndex = (this.currentIndex + 1) % this.images.length;
    },
  },
};
</script>

<style>
.slide-enter-active,
.slide-leave-active {
  transition: transform 0.5s;
}
.slide-enter,
.slide-leave-to {
  transform: translateX(100%);
}
</style>
1047 chars
51 lines