Swiper.js

提示

当前版本 v12

介绍

Swiper.js 是一个现代化的移动端触摸滑动库，广泛应用于移动端和网页端的滑动交互场景。它支持丰富的功能，如垂直和水平滑动、自动播放、循环模式等，且易于集成到各种前端框架中。

快速开始

js

import 'swiper/css'
import Swiper from 'swiper'

const swiper = new Swiper(el, {
  // ...
})

html

<!-- main -->
<div class="swiper">
  <!-- wrapper -->
  <div class="swiper-wrapper">
    <!-- slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
</div>

options

interface SwiperOptions {
  // 方向
  direction?: 'horizontal' | 'vertical'
  // 自动播放
  autoplay?: boolean | AutoplayOptions
  // 循环模式
  loop?: boolean
  // 每页显示数量
  slidesPerView?: number | 'auto'
}

modules

示例

以 pagination 为例：

js

import 'swiper/css'
import 'swiper/css/pagination'
import Swiper from 'swiper'
import { Pagination } from 'swiper/modules'

const swiper = new Swiper(el, {
  modules: [Pagination],
  pagination: {
    el: paginationEl,
  },
  // ...
})

html

<!-- main -->
<div class="swiper">
  <!-- wrapper -->
  <div class="swiper-wrapper">
    <!-- slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>

  <!-- pagination -->
  <div class="swiper-pagination"></div>
</div>

常见 modules

• Mousewheel：鼠标滚轮控制
• Pagination：分页器
• Navigation：导航按钮