下载包
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>