a vuejs image carousel in javascript

index.tsx
<template>
  <div>
    <div>
      <img :src="images[currentImage]" alt="carousel image">
    </div>
    <div>
      <button @click="prevImage">Prev</button>
      <button @click="nextImage">Next</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentImage: 0,
      images: [
        'https://via.placeholder.com/300x200/FF0000/FFFFFF?text=image1',
        'https://via.placeholder.com/300x200/00FF00/FFFFFF?text=image2',
        'https://via.placeholder.com/300x200/0000FF/FFFFFF?text=image3',
        'https://via.placeholder.com/300x200/FF00FF/FFFFFF?text=image4',
      ]
    }
  },
  methods: {
    prevImage() {
      if (this.currentImage === 0) {
        this.currentImage = this.images.length - 1;
      } else {
        this.currentImage--;
      }
    },
    nextImage() {
      if (this.currentImage === this.images.length - 1) {
        this.currentImage = 0;
      } else {
        this.currentImage++;
      }
    }
  }
}
</script>
998 chars
44 lines