<template> <main> <Carousel class="carousel" :current-page.sync="currentPage" :total-pages.sync="totalPages" autoplay> <Slide class="slide">slide 1</Slide> <Slide class="slide">slide 2</Slide> <Slide class="slide">slide 3</Slide> </Carousel> <button @click="currentPage = currentPage === 1 ? totalPages : currentPage - 1">backward</button> <button @click="currentPage = currentPage === totalPages ? 1 : currentPage + 1">forward</button> </main> </template> <script> import { Carousel, Slide } from '@jfm/vue-carousel'  export default {  components: { Carousel, Slide },   data: () => ({  currentPage: 1,  totalPages: 1  }) } </script> <style scoped> .carousel {  width: 400px;  height: 300px; }  .slide {  width: 100%;  height: 100%; } </style>