Vue.js 轮播图组件代码示例 - 简单易用
<p>"<template>\n <div class="carousel">\n <div class="slides">\n <div v-for="(slide, index) in slides" :key="index" :class="{ active: currentIndex === index }">\n <img :src="slide.image" :alt="slide.caption" />\n <div class="caption">\n <h3>{{ slide.caption }}</h3>\n <p>{{ slide.description }}</p>\n </div>\n </div>\n </div>\n <div class="dots">\n <span v-for="(slide, index) in slides" :key="index" :class="{ active: currentIndex === index }" @click="goToSlide(index)">\n </span>\n </div>\n <button class="prev" @click="prevSlide">Previous</button>\n <button class="next" @click="nextSlide">Next</button>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n slides: [\n {\n image: '/path/to/image1.jpg',\n caption: 'Slide 1',\n description: 'Description for Slide 1'\n },\n {\n image: '/path/to/image2.jpg',\n caption: 'Slide 2',\n description: 'Description for Slide 2'\n },\n {\n image: '/path/to/image3.jpg',\n caption: 'Slide 3',\n description: 'Description for Slide 3'\n }\n ],\n currentIndex: 0\n };\n },\n methods: {\n goToSlide(index) {\n this.currentIndex = index;\n },\n prevSlide() {\n this.currentIndex = (this.currentIndex - 1 + this.slides.length) % this.slides.length;\n },\n nextSlide() {\n this.currentIndex = (this.currentIndex + 1) % this.slides.length;\n }\n }\n };\n</script>\n\n<style scoped>\n .carousel {\n position: relative;\n width: 100%;\n height: 300px;\n }\n\n .slides {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n\n .slides > div {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n transition: opacity 0.5s ease-in-out;\n }\n\n .slides > div.active {\n opacity: 1;\n }\n\n .slides img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n .caption {\n position: absolute;\n bottom: 10px;\n left: 10px;\n color: #fff;\n }\n\n .dots {\n position: absolute;\n bottom: 10px;\n left: 50%;\n transform: translateX(-50%);\n }\n\n .dots span {\n display: inline-block;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background-color: #ccc;\n margin: 0 5px;\n cursor: pointer;\n }\n\n .dots span.active {\n background-color: #000;\n }\n\n .prev,\n .next {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n padding: 10px 20px;\n background-color: #000;\n color: #fff;\n border: none;\n cursor: pointer;\n }\n\n .prev {\n left: 10px;\n }\n\n .next {\n right: 10px;\n }\n</style>\n"。该组件利用 Vue.js 的特性，使用 v-for 循环渲染幻灯片，通过 currentIndex 控制当前显示的幻灯片。导航圆点也使用 v-for 循环创建，点击圆点可以切换幻灯片。代码结构简洁易懂，可根据实际需要进行扩展和修改。</p>
原文地址: https://www.cveoy.top/t/topic/pDMT 著作权归作者所有。请勿转载和采集!