Swiper Vue.js Components组件

安装

Swiper Vue.js插件仅作为主Swiper库的一部分通过NPM安装：

npm install swiper

用法

swiper/vue导出2个组件：swiper和SwiperSlide：

<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 Vue。js使用Swiper的核心版本（没有任何附加模块）。如果要使用导航、分页和其他模块，必须先安装它们。

以下是其他模块导入列表：

• Virtual - 虚拟幻灯片模块
• Keyboard - 键盘控制模块
• Mousewheel - 鼠标滚动模块
• Navigation - 导航模块
• Pagination - 分布模块
• Scrollbar - 滚动条模块
• Parallax - 视差模块
• FreeMode - 自由模式模块
• Grid - 网格模块
• Manipulation - 幻灯片操作模块（仅适用于核心版本）
• Zoom - 放大模块
• Lazy - 懒加载模块
• Controller - 控制模块
• A11y - 可达性控制模块
• History - 历史导航模块
• HashNavigation - Hash导航模块
• Autoplay - 自动播放模块
• EffectFade - 渐变特效模块
• EffectCube - 立体特效模块
• EffectFlip - 轻弹特效模块
• EffectCoverflow - Coverflow Effect module
• EffectCards - 卡片特效模块
• EffectCreative - 创新特效模块
• Thumbs - 缩略图模块

<template>
  <swiper
    :modules="modules"
    :slides-per-view="3"
    :space-between="50"
    navigation
    :pagination="{ clickable: true }"
    :scrollbar="{ draggable: true }"
    @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 core and required modules
  import { Navigation, Pagination, Scrollbar, A11y } from 'swiper';

  // Import Swiper Vue.js components
  import { Swiper, SwiperSlide } from 'swiper/vue';

  // Import Swiper styles
  import 'swiper/css';
  import 'swiper/css/navigation';
  import 'swiper/css/pagination';
  import 'swiper/css/scrollbar';

  // Import Swiper styles
  export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    setup() {
      const onSwiper = (swiper) => {
        console.log(swiper);
      };
      const onSlideChange = () => {
        console.log('slide change');
      };
      return {
        onSwiper,
        onSlideChange,
        modules: [Navigation, Pagination, Scrollbar, A11y],
      };
    },
  };
</script>

注意

Swiper Vue。如果您传递这些参数而未指定其元素（例如，未指定Navigation.nextEl、Pagination.el等），js组件将创建导航、分页和滚动条所需的元素

样式

Swiper包含不同的css,less和scss样式:

• swiper/css - 只包含Swiper核心样式
• swiper/css/bundle - 所有Swiper模块样式(比如导航，分页样式等.)

模块样式 (如果已经导入了bundle样式，则不需要此选项):

• swiper/css/a11y - A11y模块样式
• swiper/css/autoplay - Autoplay自动播放模块样式
• swiper/css/controller - Controller控制模块样式
• swiper/css/effect-cards - Cards Effect卡片特效模块样式
• swiper/css/effect-coverflow - Coverflow Effect覆盖流特效模块样式
• swiper/css/effect-creative - Creative Effect创意特效模块样式
• swiper/css/effect-cube - Cube Effect立体特效模块样式
• swiper/css/effect-fade - Fade Effect渐变模块样式
• swiper/css/effect-flip - Flip Effect翻转模块样式
• swiper/css/free-mode - Free自由模块样式
• swiper/css/grid - Grid网格模块样式
• swiper/css/hash-navigation - Hash Navigation哈斯导航模块样式
• swiper/css/history - History module历史模块样式
• swiper/css/keyboard - Keyboard键盘模块样式
• swiper/css/lazy - Lazy懒加载模块样式
• swiper/css/manipulation - Manipulation操作模块样式
• swiper/css/mousewheel - Mousewheel鼠标滚动样式
• swiper/css/navigation - Navigation导航模块样式
• swiper/css/pagination - Pagination分页模块样式
• swiper/css/parallax - Parallax视差模块样式
• swiper/css/scrollbar - Scrollbar滚动条样式
• swiper/css/thumbs - Thumbs缩略图模式
• swiper/css/virtual - Virtual虚拟模块样式
• swiper/css/zoom - Zoom放大模块样式

对于Less的样式，将css替换，例如：

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

对于SCSS的样式，将css替换，例如：

import 'swiper/scss';
import 'swiper/scss/navigation';
import 'swiper/scss/pagination';

Swiper props属性

Swiper Vue。js组件接收所有Swiper参数作为组件道具，外加一些额外道具：

Prop	类型	默认	描述
tag	string	'div'	Swiper幻灯片HTML元素
wrapperTag	string	'div'	Swiper wrapper HTML元素

Swiper events事件

Swiper组件支持所有Swiper事件，包括尽快返回Swiper实例的附加Swiper事件。例如：

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

SwiperSlide props属性

Prop	类型	默认	描述
tag	string	'div'	Swiper幻灯片HTML元素
zoom	boolean	false	启用缩放模式所需的wrapper容器
virtualIndex	number		实际滑动指数。需要为虚拟幻灯片设置

SwiperSlide slot props

SwiperSlide 组件包含以下 slot props:

• isActive - 当前幻灯片处于活动状态时为true
• isPrev - 当前幻灯片是活动的上一张幻灯片时为true
• isNext - 当前幻灯片是活动的下一张幻灯片时为真
• isVisible - 当前幻灯片可见时为true（必须启用watchSlidesProgress Swiper参数）
• isDuplicate - 例如，当当前幻灯片为重复幻灯片时（启用循环模式时），为true:

<swiper>
  <swiper-slide v-slot="{ isActive }">
    <div>Current slide is {{ isActive ? 'active' : 'not active' }}</div>
  </swiper-slide>
</swiper>

useSwiper

Swiper Vue提供了useSwiper钩子，可轻松获取Swiper内部组件中的Swiper实例：

<!-- some-inner-component.vue -->
<template>
  <button @click="swiper.slideNext()">Slide to the next slide</button>
</template>
<script>
  import { useSwiper } from 'swiper/vue';

  export default {
    setup() {
      const swiper = useSwiper();

      return {
        swiper,
      };
    },
  };
</script>

useSwiperSlide

useSwiperSlide是Swiper幻灯片内部组件获取幻灯片数据的另一个钩子（与SwiperSlid插槽道具中的数据相同）

<!-- some-inner-component.vue -->
<template>
  <p>Current slide is {{swiperSlide.isActive ? 'active' : 'not active'}}</p>
</template>
<script>
  import { useSwiperSlide } from 'swiper/vue';

  export default {
    setup() {
      const swiperSlide = useSwiperSlide();

      return {
        swiperSlide,
      };
    },
  };
</script>

Slots插槽

Swiper Vue。js组件使用“插槽”进行内容分发。有4个插槽可用

• container-start - 元素将添加到swiper-container容器的开头
• container-end (默认) - 元素将添加到swiper-container容器的尾部
• wrapper-start - 元素将添加到swiper-wrapper容器的开头
• wrapper-end - 元素将添加到swiper-wrapper容器的尾部

比如：

<swiper>
  <swiper-slide>Slide 1</swiper-slide>
  <swiper-slide>Slide 2</swiper-slide>
  <template v-slot:container-start><span>Container start</span></template>
  <template v-slot:container-end><span>Container end</span></template>
  <template v-slot:wrapper-start><span>Wrapper start</span></template>
  <template v-slot:wrapper-end><span>Wrapper end</span></template>
</swiper>

将会渲染成：

<div class="swiper">
  <span>Container start</span>
  <div class="swiper-wrapper">
    <span>Wrapper start</span>
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <span>Wrapper wnd</span>
  </div>
  <span>Container end</span>
</div>

Virtual Slides

这里的虚拟幻灯片渲染完全由Vue处理。js，除了设置：virtual=“true”属性和在幻灯片上设置virtualIndex之外，不需要其他任何东西：

<template>
  <swiper :modules="[Virtual]" :slides-per-view="3" :space-between="50" virtual>
    <swiper-slide
      v-for="(slideContent, index) in slides"
      :key="index"
      :virtualIndex="index"
      >{{slideContent}}</swiper-slide
    >
  </swiper>
</template>
<script>
  import { Virtual } from 'swiper';
  import { Swiper, SwiperSlide } from 'swiper/vue';

  export default {
    components: {
      Swiper,
      SwiperSlide,
    },

    setup() {
      // Create array with 1000 slides
      const slides = Array.from({ length: 1000 }).map(
        (el, index) => `Slide ${index + 1}`
      );
      return {
        slides,
        Virtual,
      };
    },
  };
</script>

Controller控制器

控制器需要将一个Swiper实例传递给另一个：

<template>
  <!-- Main Swiper -> pass controlled swiper instance -->
  <swiper
    :modules="[Controller]"
    :controller="{ control: controlledSwiper }"
    ...
  >
    ...
  </swiper>

  <!-- Controlled Swiper -> store swiper instance -->
  <swiper :modules="[Controller]" @swiper="setControlledSwiper" ...>
    ...
  </swiper>
</template>
<script>
  import { ref } from 'vue';
  import { Controller } from 'swiper';
  import { Swiper, SwiperSlide } from 'swiper/vue';

  export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    setup() {
      const controlledSwiper = ref(null);
      const setControlledSwiper = (swiper) => {
        controlledSwiper.value = swiper;
      };
      return {
        Controller,
        controlledSwiper,
        setControlledSwiper,
      };
    },
  };
</script>

对于双向控制（当两个刷子相互控制时），应如下所示：

<template>
  <swiper
    :modules="[Controller]"
    @swiper="setFirstSwiper"
    :controller="{ control: secondSwiper }"
    ...
  >
    ...
  </swiper>
  <swiper
    :modules="[Controller]"
    @swiper="setSecondSwiper"
    :controller="{ control: firstSwiper }"
    ...
  >
    ...
  </swiper>
</template>
<script>
  import { ref } from 'vue';
  import { Controller } from 'swiper';
  import { Swiper, SwiperSlide } from 'swiper/vue';

  export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    setup() {
      const firstSwiper = ref(null);
      const secondSwiper = ref(null);
      const setFirstSwiper = (swiper) => {
        firstSwiper.value = swiper;
      };
      const setSecondSwiper = (swiper) => {
        secondSwiper.value = swiper;
      };

      return {
        Controller,
        firstSwiper,
        secondSwiper,
        setFirstSwiper,
        setSecondSwiper,
      };
    },
  };
</script>

Thumbs缩略图

与控制器相同，我们需要存储thumbs实例并将其传递到主库：

<template>
  <!-- Main Swiper -> pass thumbs swiper instance -->
  <swiper :modules="[Thumbs]" :thumbs="{ swiper: thumbsSwiper }" ...>
    ...
  </swiper>

  <!-- Thumbs Swiper -> store swiper instance -->
  <!-- It is also required to set watchSlidesProgress prop -->
  <swiper
    :modules="[Thumbs]"
    watch-slides-progress
    @swiper="setThumbsSwiper"
    ...
  >
    ...
  </swiper>
</template>
<script>
  import { ref } from 'vue';
  import { Thumbs } from 'swiper';
  import { Swiper, SwiperSlide } from 'swiper/vue';

  export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    setup() {
      const thumbsSwiper = ref(null);
      const setThumbsSwiper = (swiper) => {
        thumbsSwiper.value = swiper;
      };
      return {
        Thumbs,
        thumbsSwiper,
        setThumbsSwiper,
      };
    },
  };
</script>

Effects特效

以下效果可用：

• Fade
• Cube
• Coverflow
• Flip
• Cards
• Creative

要使用效果，您必须先导入并安装它们（与所有其他模块一样）。

渐变效果示例

<template>
  <swiper :modules="[EffectFade]" effect="fade">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    ...
  </swiper>
</template>
<script>
  import { EffectFade } from 'swiper';
  import { Swiper, SwiperSlide } from 'swiper/vue';

  import 'swiper/css';
  import 'swiper/css/effect-fade';

  export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    setup() {
      return {
        EffectFade,
      };
    },
  };
</script>
```~~