2023 Vue3-setup 手把手教你详细使用 Swiper8
目录
环境：swiper9.2.4+vue3.2.47+vite4.3.5
swiper-vue 文档：https://swiperjs.com/vue
swiper8 文档：https://v8.swiperjs.com/
中文文档：https://www.swiper.com.cn/api/parameters/191.html
1 开始
本教程依据官方文档，并且该文档会持续更新
- 安装
pnpm i swiper- 简单使用
<template>
<div class="hello">
<swiper
:modules="[Virtual]"
:slides-per-view="3"
:space-between="50"
:loop="true"
virtual
>
<swiper-slide
v-for="(slideContent, index) in slides"
:key="index"
:virtual-index="index"
>{{ slideContent }}</swiper-slide
>
</swiper>
</div>
</template>
<script setup lang="ts">
import "swiper/css";
import { Virtual } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
const slides = Array.from({ length: 1000 }).map(
(el, index) => `Slide ${index + 1}`
);
</script>2 swiper API
指在 swiper 标签内可以使用的属性，我拿一些出来举例，详细的看文档（https://www.swiper.com.cn/api/parameters/191.html）
initial-slide="Num"：设置初始化显示的 swiper，范围是 0 到 ndirection="horizontal/horizontal"：滑动方向slides-per-view="Num"：每页显示个数space-between="Num"：间隔loop="true"：自动播放watchOverflow="true"：只有一个 slide 时 swiper 失效。speed="Num"：滑动时间autoHeight="true"：高度随内容改变:pagination="{ clickable: true }"：分页器:navigation="true"：左右箭头
import SwiperCore, { Autoplay, Navigation, Pagination, A11y } from "swiper";
SwiperCore.use([Navigation, Pagination, A11y, Autoplay]);
import "swiper/css/navigation";
import "swiper/css/pagination";breakpoints="Object"：设置断点，但屏幕宽度小于一定值时改变 swiper 的显示，响应式。注意不推荐和slides-per-view同时设置
let breakpoints = {
// when window width is >= 320px
320: {
slidesPerView: 2,
spaceBetween: 20,
},
// when window width is >= 480px
480: {
slidesPerView: 3,
spaceBetween: 30,
},
// when window width is >= 640px
640: {
slidesPerView: 4,
spaceBetween: 40,
},
};3 swiper-slide slot
isActive- 当前 slide 活跃时为 trueisPrev- 当前 slide 是活跃 slide 的上一个时为 trueisNext- 当前 slide 是活跃 slide 的下一个时为 trueisVisible- 当前幻灯片可见时为真（必须启用watchSlidesProgressSwiper 参数）isDuplicate- 当前幻灯片为重复幻灯片时为真 (whenloopmode enabled) For example:
<swiper>
<swiper-slide v-slot="{ isActive }">
<div>Current slide is {{ isActive ? 'active' : 'not active' }}</div>
</swiper-slide>
</swiper>4 自定义箭头
- 注意，要记得给
Swiper绑定refs
<button @click="$refs.mySwiper.$el.swiper.slideNext()">
Slide to the next slide
</button>如果想在 js/ts 中使用需要
import { ref } from "vue";
let mySwiper = ref(null);
let onclick_mySwiper = () => {
return mySwiper.value.$el.swiper.slideNext();
};