轮播图自定义内容

官网：Swiper演示 - Swiper中文网

下载：

npm i swiper

Vue3示例代码：

<template><div class="swiper mySwiper"><div class="swiper-wrapper"><div class="swiper-slide"><div>111</div><div>222</div></div><div class="swiper-slide">Slide 2</div><div class="swiper-slide">Slide 3</div><div class="swiper-slide">Slide 4</div><div class="swiper-slide">Slide 5</div><div class="swiper-slide">Slide 6</div><div class="swiper-slide">Slide 7</div><div class="swiper-slide">Slide 8</div><div class="swiper-slide">Slide 9</div></div></div><button @click="slideToIndex(1)">点击切换</button>
</template><script>
import Swiper from 'swiper';
import 'swiper/swiper-bundle.min.css';export default {data() {return {swiper: null,activeIndex: 0, // 用于存储当前活动的滑动项下标};},mounted() {this.swiper = new Swiper(".mySwiper", {autoplay: {delay: 3000,disableOnInteraction: false,},on: {slideChange: () => {this.activeIndex = this.swiper.activeIndex; // 更新当前活动项下标}}});},methods: {slideToIndex(index) {if (this.swiper) {this.swiper.slideTo(index); // 使用 Swiper 的 slideTo 方法切换到指定下标}},},
};
</script><style scoped>
html,
body {position: relative;height: 100%;
}body {background: #eee;font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 14px;color: #000;margin: 0;padding: 0;
}.swiper {width: 100%;height: 100%;
}.swiper-slide {text-align: center;font-size: 18px;background: #fff;display: flex;justify-content: center;align-items: center;
}.swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;
}
</style>