<template> <div class="carousel"> <div class="carousel-inner"> <div v-for="(item, index) in visibleItems" :key="index" class="carousel-item"> <!-- Your carousel item content --> <div>{{ item }}</div> </div> </div> <button @click="prev" class="btn-prev">Previous</button> <button @click="next" class="btn-next">Next</button> </div> </template> <script> import { ref, computed } from 'vue'; export default { name: 'Carousel', setup() { const items = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]); // Sample items const pageSize = 3; // Number of items visible at a time const currentPage = ref(0); const visibleItems = computed(() => { const startIndex = currentPage.value * pageSize; return items.value.slice(startIndex, startIndex + pageSize); }); const next = () => { if (currentPage.value < Math.ceil(items.value.length / pageSize) - 1) { currentPage.value++; } }; const prev = () => { if (currentPage.value > 0) { currentPage.value--; } }; return { visibleItems, next, prev }; } }; </script> <style scoped> .carousel { position: relative; overflow: hidden; } .carousel-inner { display: flex; } .carousel-item { flex: 0 0 auto; } .btn-prev, .btn-next { position: absolute; top: 50%; transform: translateY(-50%); padding: 8px 16px; border: 1px solid #333; background-color: #fff; cursor: pointer; } .btn-prev { left: 0; } .btn-next { right: 0; } </style>