[官方] 中文文档

1.安装

 npm i swiper

2.使用

<template>
  <swiper
    :slides-per-view="3"
    :space-between="50"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    ...
  </swiper>
</template>
<script>
  // Import Swiper Vue.js components
  import { Swiper, SwiperSlide } from 'swiper/vue';

  // Import Swiper styles
  import 'swiper/css';

  export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    setup() {
      const onSwiper = (swiper) => {
        console.log(swiper);
      };
      const onSlideChange = () => {
        console.log('slide change');
      };
      return {
        onSwiper,
        onSlideChange,
      };
    },
  };
</script>

<swiper @swiper="..." @slideChange="..." @reachEnd="..." ...></swiper>

注：对于 Less 样式，在导入路径中替换css为less，例如：

import 'swiper/less';
import 'swiper/less/navigation';
import 'swiper/less/pagination';

3.风格设置

• swiper/css- 仅核心 Swiper 样式
• swiper/css/bundle- 所有 Swiper 样式，包括所有模块样式（如导航、分页等）
• swiper/css/a11y- A11y 模块所需的样式
• swiper/css/autoplay- 自动播放模块所需的样式
• swiper/css/controller- 控制器模块所需的样式
• swiper/css/effect-cards- 卡片效果模块所需的样式
• swiper/css/effect-coverflow- Coverflow 效果模块所需的样式
• swiper/css/effect-creative- 创意效果模块所需的样式
• swiper/css/effect-cube- 立方体效果模块所需的样式
• swiper/css/effect-fade- 淡化效果模块所需的样式
• swiper/css/effect-flip- 翻转效果模块所需的样式
• swiper/css/free-mode- 自由模式模块所需的样式
• swiper/css/grid- 网格模块所需的样式
• swiper/css/hash-navigation- 哈希导航模块所需的样式
• swiper/css/history- 历史模块所需的样式
• swiper/css/keyboard- 键盘模块所需的样式
• swiper/css/lazy- 懒惰模块所需的样式
• swiper/css/manipulation- 操作模块所需的样式
• swiper/css/mousewheel- 鼠标滚轮模块所需的样式
• swiper/css/navigation- 导航模块所需的样式
• swiper/css/pagination- 分页模块所需的样式
• swiper/css/parallax- 视差模块所需的样式
• swiper/css/scrollbar- 滚动条模块所需的样式
• swiper/css/thumbs- 拇指模块所需的样式
• swiper/css/virtual- 虚拟模块所需的样式
• swiper/css/zoom- 缩放模块所需的样式