Vue3 使用 swiper 8.x 插件

原创已于 2022-07-04 09:43:05 修改 · 926 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端

于 2022-07-04 09:38:57 首次发布

本文介绍如何使用npm安装Swiper轮播库，并通过Vue进行配置。包括引入必要的Swiper模块如Pagination、Autoplay和A11y，以及设置轮播的各项属性。

安装Swiper

npm i swiper -S

modules 是必须引入注册的

<template>
  <Swiper
      :modules="modules"
      loop
      :autoplay="{
        delay: 10000,
        reverseDirection: true,
        disableOnInteraction: true
      }"
      :pagination="{
        clickable: true,
        bulletElement : 'li',
        bulletClass : 'home-swiper-pagination',//需设置.my-bullet样式
        bulletActiveClass: 'home-swiper-pagination-active',
      }"
    >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
  </swiper>
</template>


<script setup>
  import { Swiper, SwiperSlide } from 'swiper/vue'
  import { Pagination, Autoplay, A11y } from 'swiper'
  import 'swiper/css'
  import 'swiper/css/pagination'
  import 'swiper/css/autoplay'
  /**
   * @modules 需要用到的 Swiper 模块。
  */
  const modules = [Pagination, A11y, Autoplay]
</script>

Vue-Swiper