Swiper 10.2.0 基本使用,Vue3

Swiper 10.2.0 基本使用手册

安装方法

1. 使用 npm 安装

npm install swiper --save

2. 使用 cdn

<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-element-bundle.min.js"></script>

2. 使用方法

2.1. 在 Vue 中使用

<script setup>
import { register } from 'swiper/element/bundle'
register() // 注册 swiper 组件,如果安装方法使用的是 cdn,则不需要这一步,也不需要上方的引入
const swiperOptions = {
  autoplay: {
    delay: 1000,
    enabled: true
  }
}
const init = () => {
  console.log('1')
}
</script>

<template>
  <main>
    <swiper-container
      class="swiper-container"
      navigation="true"
      ref="mainSwiper"
      pagination="true"
      :autoplay="swiperOptions.autoplay"
      @init="init"
    >
      <swiper-slide v-pre>Slide 1</swiper-slide>
      <swiper-slide v-pre>Slide 2</swiper-slide>
      <swiper-slide v-pre>Slide 3</swiper-slide>
    </swiper-container>
  </main>
</template>

在网页中如何控制台出现下图警告,则将 vite.config.js 修改为如下

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
  plugins: [
    vue({
      // 忽略自定义元素警告
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.startsWith('swiper-')
        }
      }
    }),
    vueJsx()
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

3. 详细使用方法

3.1. swiper-container

3.1.1. swiper-container 属性

slidesPerView：每个滑动组件显示的幻灯片数量，可以是数字或’auto’，默认为1。

spaceBetween：幻灯片之间的间距（单位为px），默认为0。

speed：滑动速度（单位为毫秒），默认为300。

loop：是否循环播放幻灯片，可以是true或false，默认为false。

cssMode：是否使用CSS滚动模式，可以提高性能和兼容性，可以是true或false，默认为false。

direction：滑动方向，可以是’horizontal’或’vertical’，默认为’horizontal’。

effect：滑动效果，可以是’slide’、‘fade’、‘cube’、‘coverflow’或’flip’，默认为’slide’。

autoplay：是否自动播放幻灯片，可以是true或false，或者一个对象，包含delay（延迟时间，单位为毫秒），stopOnLastSlide（是否在最后一张幻灯片停止），disableOnInteraction（是否在用户交互时停止），reverseDirection（是否反向播放），waitForTransition（是否等待过渡结束），pauseOnMouseEnter（是否在鼠标进入时暂停），默认为false,endable（是否启用）。

pagination：是否显示分页器，可以是true或false，或者一个对象，包含el（分页器元素的选择器或HTML元素），type（分页器类型，可以是’bullets’、‘fraction’、‘progressbar’或’custom’），clickable（分页器是否可点击），dynamicBullets（分页器是否动态调整大小），dynamicMainBullets（分页器显示的主要子弹数量），hideOnClick（分页器是否在点击时隐藏），renderBullet（自定义渲染子弹的函数），renderFraction（自定义渲染分数的函数），renderProgressbar（自定义渲染进度条的函数），bulletClass（子弹元素的类名），bulletActiveClass（激活子弹元素的类名），modifierClass（修改器类名前缀），currentClass（当前分数元素的类名），totalClass（总分数元素的类名），hiddenClass（隐藏分页器元素的类名），progressbarFillClass（进度条填充元素的类名），clickableClass（可点击分页器元素的类名），lockClass（锁定分页器元素的类名）等参数，默认为false。

navigation：是否显示导航按钮，可以是true或false，或者一个对象，包含nextEl（下一个按钮元素的选择器或HTML元素），prevEl（上一个按钮元素的选择器或HTML元素），hideOnClick（导航按钮是否在点击时隐藏），disabledClass（禁用导航按钮元素的类名），hiddenClass（隐藏导航按钮元素的类名）等参数，默认为false。

scrollbar：是否显示滚动条，可以是true或false，或者一个对象，包含el（滚动条元素的选择器或HTML元素），dragSize （滚动条拖动块的大小，可以是数字或’auto’），hide （滚动条是否在没有交互时隐藏），draggable （滚动条拖动块是否可拖动）,snapOnRelease （释放滚动条拖动块后是否切换到最近的幻灯片）,lockClass （锁定滚动条拖动块元素的类名）,dragClass （拖动中滚动条拖动块元素的类名）等参数，默认为false。

freeMode：是否启用自由模式，可以是true或false。在自由模式下，幻灯片不会贴合到边缘，而是根据惯性继续滑动，默认为false。
grid：是否启用网格模式，可以是true或false，或者一个对象，包含fill（填充模式，可以是’row’或’column’），rows（行数）等参数。在网格模式下，幻灯片可以在多行多列布局，默认为false。

manipulation：是否启用动态操纵模式，可以是true或false。在动态操纵模式下，可以使用appendSlide、prependSlide、removeSlide、removeAllSlides等方法动态添加或删除幻灯片，默认为false。

4. 模块

4.1 自动播放

<swiper-container
  class="swiper-container"
  ref="mainSwiper"
  :autoplay="{
    delay: 1000,
    enabled: true
  }"
  :autoplay="swiperOptions.autoplay"
>
     ...
</swiper-container>

4.2. 分页器

<swiper-container
  class="swiper-container"
  ref="mainSwiper"
  :pagination="{
    el: '.swiper-pagination', // 分页器元素的选择器或HTML元素,如果不写 el 则显示默认分页器
    clickable: true
  }"
>
     ...
</swiper-container>
<div class="swiper-pagination" style="border: 1px solid #000"></div> // 自定义分页器一般写在 swiper-container 外面

4.3. 导航按钮

<swiper-container
  class="swiper-container"
  ref="mainSwiper"
  :navigation="{
    nextEl: '.swiper-button-next', // 下一个按钮元素的选择器或HTML元素
    prevEl: '.swiper-button-prev', // 上一个按钮元素的选择器或HTML元素,如果不写 nextEl 和 prevEl 则显示默认按钮
    hideOnClick: true
  }"
>
     ...
</swiper-container>
<div class="swiper-button-next" style="border: 1px solid #000"></div> // 自定义按钮一般写在 swiper-container 外面
<div class="swiper-button-prev" style="border: 1px solid #000"></div> // 自定义按钮一般写在 swiper-container 外面

4.4. 滚动条

<swiper-container
  class="swiper-container"
  ref="mainSwiper"
  :scrollbar="{
    el: '.swiper-scrollbar', // 滚动条元素的选择器或HTML元素,如果不写 el 则显示默认滚动条
    dragSize: 100, // 滚动条拖动块的大小，可以是数字或’auto’
    draggable: true, // 滚动条拖动块是否可拖动
    snapOnRelease: true // 释放滚动条拖动块后是否切换到最近的幻灯片
  }"
>
     ...
</swiper-container>

5. 事件

5.1. init

<swiper-container
  class="swiper-container"
  ref="mainSwiper"
  @init="init"
>
     ...
</swiper-container>

<script setup>

const init = () => {
  console.log('1')
}

</script>

5.2. slidechange

<swiper-container
  class="swiper-container"
  ref="mainSwiper"
  @slidechange="slideChange" // 注意这里的事件名是小写
>
     ...
</swiper-container>

<script setup>
import { register } from "swiper/element/bundle"
register()

const slideChange = () => {
  console.log('1')
}

</script>

6. 获取 swiper 实例

<template>
  <swiper-container class="swiper-container" ref="mainSwiper" @init="init" @slidechange="slideChange">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
  </swiper-container>
</template>

<script setup>
import { register } from "swiper/element/bundle"
import { nextTick, onMounted, ref } from "vue"
register()

const mainSwiper = ref(null)

const init = async function () {
  await nextTick()
  console.log("1", mainSwiper.value)
}
const slideChange = () => {
  console.log("2")
}

onMounted(() => {
  console.log("3", mainSwiper.value)
})
</script>