最新swiper应用记录
swiper中文API
swiper英文版API 倡议看此API
"vue": "^3.2.37"
"swiper": "8.3.2"
装置
npm i swiper- 在组件中导入swiper
import { Swiper, SwiperSlide } from "swiper/vue";// 这是分页器和对应办法，swiper如同在6的时候就曾经拆散了分页器和一些其余工具import SwiperCore, { Autoplay, Navigation, Pagination, A11y } from "swiper";SwiperCore.use([Navigation, Pagination, Scrollbar, A11y, Autoplay]);// 引入swiper款式，对应css 如果应用less或者css只须要把scss改为对应的即可import "swiper/css";import "swiper/css/navigation";import "swiper/css/pagination";const modules = [Autoplay, Pagination, Navigation, A11y];特地阐明SwiperCore须要通过它来应用裸露的属性
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y, Autoplay])
- 在模板中应用
<template> <swiper :slidesPerView="1" :spaceBetween="30" :loop="true" :centeredSlides="true" :pagination="{ clickable: true, }" :autoplay="{ delay: 1000, disableOnInteraction: false, }" :navigation="true" :modules="modules" class="mySwiper" ref="mySwiper" > <swiper-slide v-for="(item, index) in imgList" :key="index"> <div style="width: 100%" class="flex"> <img style="width: 100%; height: 100%" :src="item" /> </div> </swiper-slide> </swiper></template><script setup> // 这是分页器和对应办法，swiper如同在6的时候就曾经拆散了分页器和一些其余工具 import SwiperCore, { Autoplay, Navigation, Pagination, A11y } from 'swiper'; const modules = [Autoplay, Pagination, Navigation, A11y]; import 'swiper/css' import 'swiper/css/navigation' // import 'swiper/css/pagination' // import 'swiper/css/bundle' const imgList = ref(['https://www.baidu.com/img/bdlogo.png'])</script>- 局部参数阐明：
:slidesPerView="1" //每页显示几个
:spaceBetween="30" //每个间距是多少
:loop="true" //循环滚动
:centeredSlides="true" //值为【false】时左对齐，默认就是左对齐，值为【true】时居中对齐
:pagination="{
clickable: true,
}"//点击分页圆点是否切换
:autoplay="{
delay: 1000,
disableOnInteraction: false,
}"//设置多少毫秒会执行一次动画（能够了解为：翻页 / 切换）
:navigation="true" //左右切换箭头 - 自定义箭头（留神点）
通过应用以下导入并且应用
import { useSwiper } from 'swiper/vue';const swiper = useSwiper();<button @click="swiper.slideNext()">next</button>后果是未找到slideNext办法，大抵看了下源码貌似没暴露出此办法，也或者是应用办法不对，有晓得的评论留言哈
最初不在折腾，换了种形式(通过ref)能拿到对应属性
const mySwiper = ref<null | HTMLElement>(null)// 获取swiper属性mySwiper.value?.$el.swipermySwiper.value?.$el.swiper.slideNext()