vue3中使用swiper具体步骤

下载包

cnpm i swiper 
npm i swiper
yarn add swiper

引入依赖

import {
    Navigation,
    Pagination,
    Scrollbar,
    A11y,
    Autoplay,
    Mousewheel,
    Controller,
} from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation"; // 导入导航按钮的样式
const modules = [Pagination, Autoplay, Scrollbar, A11y, Mousewheel, Controller];```

template中的应用

```javascript
<swiper 
	:modules="modules" :pagination="{ clickable: true }"
    :mousewheel="{ enabled: true, invert: false, sensitivity: 1 }"
    :autoplay="{ delay: 3000, disableOnInteraction: false }"
    @swiper="onSwiper" >
    <template v-for="(item, index) in noticeList" :key="index">
        <swiper-slide v-if="item.status">
            <img :src="dealWithImgUrl(item.image_url)" alt="" class="img"
                @error="hangleErrorImg($event, `lunbo`)" />
        </swiper-slide>
    </template>
</swiper>

在setup中的操作

<script setup>
const swiperRef = ref(null);
const currentIndex = ref(1);
const sideTotal = ref(0)
/** 获取swiper示例对象*/
const onSwiper = (swiper) => {
    swiperRef.value = swiper
}

const goToNext = () => {
    if (swiperRef.value) {
        swiperRef.value.slideNext();
        // 获取当前swiper索引
        currentIndex.value = swiperRef.value.realIndex + 1
        // 获取swiper总数
        sideTotal.value = swiperRef.value.slides.length
    }
};
const goToPrev = () => {
    if (swiperRef.value) {
        swiperRef.value.slidePrev();
        // 获取当前swiper索引
        currentIndex.value = swiperRef.value.realIndex + 1
         // 获取swiper总数
        sideTotal.value = swiperRef.value.slides.length
    }
};
</script>