<template>
<div class="carousel">
<transition name="carousel-fade">
<div class="carousel-inner">
<div v-for="(item, index) in carouselItems" :key="index" :class="['carousel-item', index === activeIndex ? 'active' : '']">
<img :src="item.image" class="d-block w-100" alt="Slide Image">
<div class="carousel-caption d-none d-md-block">
<h5>{{ item.title }}</h5>
<p>{{ item.caption }}</p>
</div>
</div>
</div>
</transition>
<a class="carousel-control-prev" href="#" role="button" @click="prevSlide">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#" role="button" @click="nextSlide">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
const activeIndex = ref(0);
const autoplayInterval = ref(null);
const carouselItems = [
];
const prevSlide = () => {
activeIndex.value = (activeIndex.value - 1 + carouselItems.length) % carouselItems.length;
};
const nextSlide = () => {
activeIndex.value = (activeIndex.value + 1) % carouselItems.length;
};
onMounted(() => {
startAutoplay();
});
onUnmounted(() => {
stopAutoplay();
});
const startAutoplay = () => {
autoplayInterval.value = setInterval(() => {
nextSlide();
}, 3000);
};
const stopAutoplay = () => {
clearInterval(autoplayInterval.value);
};
</script>
<style scoped>
.carousel {
position: relative;
}
.carousel-inner {
overflow: hidden;
}
.carousel-item {
display: none;
}
.carousel-item.active {
display: block;
}
.carousel-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 15px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
}
.carousel-control-prev,
.carousel-control-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 3rem;
height: 3rem;
font-size: 2rem;
color: #fff;
background: rgba(0, 0, 0, 0.6);
border: none;
border-radius: 50%;
z-index: 10;
cursor: pointer;
}
.carousel-control-prev {
left: 1rem;
}
.carousel-control-next {
right: 1rem;
}
.carousel-fade-enter-active,
.carousel-fade-leave-active {
transition: opacity 1s;
}
.carousel-fade-enter,
.carousel-fade-leave-to {
opacity: 0;
}
</style>