SwiperSwiper 中文网v11.2.6
Swiper
Swiper
最现代的移动触摸滑块
MIT Licensed, v11.2.6 released on March 19, 2025
立即开始
Endless Creativity
Build Complex Touch Galleries
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Start Using It Now
Get Started

Swiper

Swiper 是最现代化的 免费开源 移动触控滑块，具有硬件加速过渡和 出色的原生行为。它适用于网站、Web 应用以及移动原生/混合应用。

适用于

JavaScript logo
React logo
Vue.js logo
WebComponents logo

易如反掌

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-element-bundle.min.js"></script>
<swiper-container>
  <swiper-slide>Slide 1</swiper-slide>
  <swiper-slide>Slide 2</swiper-slide>
  <swiper-slide>Slide 3</swiper-slide>
  <swiper-slide>Slide ...</swiper-slide>
</swiper-container>

拥有一流的功能

  • 库无关

    Swiper 不需要任何 JavaScript 库（例如 jQuery），这使得 Swiper 体积更小、速度更快。

  • 模块化结构

    Swiper 采用模块化结构，允许你仅使用必要的模块，从而进一步缩小其体积。

  • 丰富的 API

    Swiper 拥有非常丰富的 API。你甚至可以创建自己的插件

  • 完全 RTL 支持

    Swiper 提供 100% RTL 支持，并支持正确的布局

  • 多行幻灯片布局

    Swiper 支持多行幻灯片布局，每列包含多张幻灯片

  • 过渡效果

    提供丰富的过渡效果，包括 3D 效果

  • 双向控制和拇指按钮

    Swiper 可用作任意数量其他 Swiper 的控制器

  • 完全导航控制

    所有必需的导航元素都在这里 - 分页、导航、滚动条

  • 最灵活的幻灯片布局网格

    Swiper 拥有丰富的参数，使其尽可能灵活

  • 视差过渡

    Swiper 支持现代视差过渡效果，可用于 Swiper 内部的任何元素：图片、文本块、标题、背景等。

  • 图片延迟加载

    延迟加载非活动/不可见幻灯片中的图片，直到用户滑动到它们

  • 虚拟幻灯片

    当你有大量内容丰富的幻灯片时，此功能非常有用它只在 DOM 中保留所需数量的幻灯片

  • CSS 滚动捕捉

    特殊模式，利用自然的 CSS 滚动实现无限性能

  • 以及更多……

    响应式、滚动阻止、阻力、自动播放、循环模式等