Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架。

Swiper 完全免费并开源（MIT Licensed），无论你使用在个人网站或商业网站，都无需付费。

中文网址：https://www.swiper.com.cn/

安装Swiper

npm i swiper -D

版本：swiper@8.4.7

将 swiper 包装成组件

/src/components/swiper.vue

<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Autoplay, Pagination, Navigation, Scrollbar } from 'swiper'
const modules = [Autoplay, Pagination, Navigation, Scrollbar]
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import 'swiper/css/scrollbar'
const props = defineProps({
    list: Array,
})
const navigation = {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
}
// 切换时触发
const onSlideChange = swiper => {
    // console.log(swiper.activeIndex)
}
const prevEl = () => {
    // console.log('上一张');
}
const nextEl = () => {
    // console.log('下一张');
}
</script>
<template>
    <swiper
        :modules="modules"
        :loop="true"
        :slides-per-view="1"
        :space-between="50"
        :autoplay="{ delay: 4000, disableOnInteraction: false }"
        :navigation="navigation"
        :pagination="{ clickable: true }"
        :scrollbar="{ draggable: false }"
        class="swiper-box"
        @slideChange="onSlideChange"
    >
        <template v-for="(item, index) in props.list" :key="index">
            <swiper-slide>
                <div class="slide">{{ item }}</div>
            </swiper-slide>
        </template>
        <!-- <div class="swiper-button-prev" @click="prevEl"></div>
        <div class="swiper-button-next" @click="nextEl"></div> -->
        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar"></div>
    </swiper>
</template>
<style lang="less" scoped>
.swiper-box {
    width: 100%;
    height: 62vw;
    background-color: aquamarine;
    .slide {
        width: 100%;
        height: 100%;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        font-size: 32px;
    }
}
</style>

在组件中使用包装成swiper组件

<script setup>
import Swiper from '/src/components/swiper.vue'
import { ref } from 'vue'
const swiperList = ref(['Slide A', 'Slide B', 'Slide C'])
</srcipt>
<template>
	<Swiper :list="swiperList"></Swiper>
</template>