1. 安装
执行命令:
npm install swiper --save
如果安装依赖需要增加版本号,只需要在其后加 ‘@版本号’
例如:
1. 安装
执行命令:
npm install swiper --save
如果安装依赖需要增加版本号,只需要在其后加 ‘@版本号’
例如:npm install swiper@7.4.1 --save
2. 注入
import { Navigation, Pagination, Scrollbar, A11y, Autoplay } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js";
import "swiper/swiper.min.css";
import "swiper/modules/navigation/navigation.min.css";
import "swiper/modules/pagination/pagination.min.css";
import "swiper/modules/scrollbar/scrollbar.min.css";
components: {
Swiper,
SwiperSlide,
},
setup() {
const onSwiper = (swiper) => {
console.log(swiper);
};
const onSlideChange = () => {
console.log("slide change");
};
return {
onSwiper,
onSlideChange,
modules: [Navigation, Pagination, Scrollbar, A11y, Autoplay],
};
},
渲染:
<swiper
:modules="modules"
:slides-per-view="1"
:space-between="50"
navigation
:loop="true"
:observer="true"
:observeParents="true"
:autoplay="{ disableOnInteraction: false, delay: 3000 }"
:pagination="{ clickable: true }"
:scrollbar="{ draggable: true }"
@swiper="onSwiper"
@slideChange="onSlideChange"
>
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
</swiper>
最终效果: