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

开始

本教程依据官方文档，并且该文档会持续更新

安装

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>

swiper API

指在 swiper 标签内可以使用的属性，我拿一些出来举例，详细的看文档（https://www.swiper.com.cn/api/parameters/191.html）

initial-slide="Num"：设置初始化显示的 swiper，范围是 0 到 n
direction="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,
  },
};

swiper-slide slot

isActive - 当前 slide 活跃时为 true
isPrev - 当前 slide 是活跃 slide 的上一个时为 true
isNext - 当前 slide 是活跃 slide 的下一个时为 true
isVisible - 当前幻灯片可见时为真（必须启用 watchSlidesProgress Swiper 参数）
isDuplicate - 当前幻灯片为重复幻灯片时为真 (when loop mode enabled) For example:

<swiper>
  <swiper-slide v-slot="{ isActive }">
    <div>Current slide is {{ isActive ? 'active' : 'not active' }}</div>
  </swiper-slide>
</swiper>

自定义箭头

注意，要记得给 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();
};