轮播图

Swiper - 现代化的触摸滑动组件。

Swiper

基本信息

• 简介: 现代化的移动触摸滑动组件
• 链接: https://swiperjs.com/
• 演示: https://swiperjs.com/demos#default
• GitHub: https://github.com/nolimits4web/swiper

特点

• ✅ 功能强大，配置灵活
• ✅ 支持触摸滑动
• ✅ 响应式设计
• ✅ 丰富的动画效果
• ✅ 支持 Vue 3
• ✅ TypeScript 支持
• ✅ 模块化设计

安装

npm

npm install swiper

pnpm

pnpm add swiper

yarn

yarn add swiper

bun

bun add swiper

基础用法

<script setup lang="ts">
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'

const slides = ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5']
</script>

<template>
  <Swiper
    :slides-per-view="1"
    :space-between="50"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
    <SwiperSlide v-for="slide in slides" :key="slide">
      {{ slide }}
    </SwiperSlide>
  </Swiper>
</template>

带导航和分页

<script setup lang="ts">
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Navigation, Pagination } from 'swiper/modules'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'

const modules = [Navigation, Pagination]
</script>

<template>
  <Swiper
    :modules="modules"
    :navigation="true"
    :pagination="{ clickable: true }"
    :slides-per-view="1"
    :space-between="30"
  >
    <SwiperSlide v-for="i in 5" :key="i">
      <div class="slide-content">Slide {{ i }}</div>
    </SwiperSlide>
  </Swiper>
</template>

<style scoped>
.slide-content {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  font-size: 24px;
}
</style>

自动播放

<script setup lang="ts">
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Autoplay, Pagination } from 'swiper/modules'
import 'swiper/css'
import 'swiper/css/pagination'

const modules = [Autoplay, Pagination]
</script>

<template>
  <Swiper
    :modules="modules"
    :autoplay="{
      delay: 2500,
      disableOnInteraction: false,
    }"
    :pagination="{ clickable: true }"
    :loop="true"
  >
    <SwiperSlide v-for="i in 5" :key="i">
      <img :src="`/images/slide-${i}.jpg`" alt="Slide">
    </SwiperSlide>
  </Swiper>
</template>

多列展示

<script setup lang="ts">
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Pagination } from 'swiper/modules'
import 'swiper/css'
import 'swiper/css/pagination'

const modules = [Pagination]
</script>

<template>
  <Swiper
    :modules="modules"
    :slides-per-view="3"
    :space-between="30"
    :pagination="{ clickable: true }"
    :breakpoints="{
      320: { slidesPerView: 1, spaceBetween: 10 },
      640: { slidesPerView: 2, spaceBetween: 20 },
      1024: { slidesPerView: 3, spaceBetween: 30 },
    }"
  >
    <SwiperSlide v-for="i in 9" :key="i">
      <div class="card">Card {{ i }}</div>
    </SwiperSlide>
  </Swiper>
</template>

常用配置

配置项	类型	说明
slidesPerView	number	每页显示的滑块数量
spaceBetween	number	滑块之间的间距（px）
loop	boolean	是否循环播放
autoplay	object	自动播放配置
navigation	boolean/object	是否显示前进后退按钮
pagination	boolean/object	是否显示分页器
scrollbar	boolean/object	是否显示滚动条
effect	string	切换效果：'slide', 'fade', 'cube', 'coverflow', 'flip'
speed	number	切换速度（ms）
direction	string	滑动方向：'horizontal', 'vertical'

常用模块

• Navigation - 前进后退按钮
• Pagination - 分页器
• Scrollbar - 滚动条
• Autoplay - 自动播放
• EffectFade - 淡入淡出效果
• EffectCube - 3D 立方体效果
• EffectCoverflow - 3D 流式效果
• EffectFlip - 3D 翻转效果
• Thumbs - 缩略图
• Zoom - 缩放功能
• Lazy - 图片懒加载
• Virtual - 虚拟滚动

推荐场景

• ✅ 图片轮播
• ✅ 产品展示
• ✅ 内容滑动
• ✅ 移动端触摸滑动
• ✅ 响应式布局