Swiper Vue.js 插件仅作为 Swiper 主库的一部分通过 NPM 提供
npm i 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/modules
中附加模块的导入列表
Virtual
- 虚拟幻灯片模块Keyboard
- 键盘控制模块Mousewheel
- 鼠标滚轮控制模块Navigation
- 导航模块Pagination
- 分页模块Scrollbar
- 滚动条模块Parallax
- 视差模块FreeMode
- 自由模式模块Grid
- 网格模块Manipulation
- 幻灯片操作模块(仅适用于核心版本)Zoom
- 缩放模块Controller
- 控制器模块A11y
- 无障碍模块History
- 历史导航模块HashNavigation
- 哈希导航模块Autoplay
- 自动播放模块EffectFade
- 淡入淡出效果模块EffectCube
- 立方体效果模块EffectFlip
- 翻转效果模块EffectCoverflow
- 覆盖流效果模块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/modules';
// 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>
navigation.nextEl
、pagination.el
等),Swiper Vue 组件将为导航、分页和滚动条创建所需的元素Swiper 包包含不同的 CSS 样式集
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
- 覆盖流效果模块所需的样式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/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
- 缩放模块所需的样式Swiper
Vue.js 组件接收所有 Swiper 参数作为组件 props,以及一些额外的 props
Prop | 类型 | 默认值 | 描述 |
---|---|---|---|
tag | 字符串 | 'div' | 主 Swiper 容器 HTML 元素标签 |
wrapperTag | 字符串 | 'div' | Swiper wrapper HTML 元素标签 |
Swiper 组件支持所有 Swiper 事件,包括附加的 swiper
事件,该事件会尽快返回 swiper 实例。例如
<swiper @swiper="..." @slideChange="..." @reachEnd="..." ...></swiper>
Prop | 类型 | 默认值 | 描述 |
---|---|---|---|
tag | 字符串 | 'div' | Swiper Slide HTML 元素标签 |
zoom | 布尔值 | false | 启用缩放模式所需的附加包装器 |
virtualIndex | 数字 | 实际的 Swiper slide 索引。必须为虚拟 slide 设置 |
SwiperSlide
组件具有以下插槽 props
isActive
- 当前 slide 处于活动状态时为 trueisPrev
- 当前 slide 是活动 slide 的前一个时为 trueisNext
- 当前 slide 是活动 slide 的下一个时为 trueisVisible
- 当前 slide 可见时为 true(必须启用 watchSlidesProgress
Swiper 参数)isDuplicate
- 当前 slide 是重复 slide 时为 true(当启用 loop
模式时)例如<swiper>
<swiper-slide v-slot="{ isActive }">
<div>Current slide is {{ isActive ? 'active' : 'not active' }}</div>
</swiper-slide>
</swiper>
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
是 Swiper slide 内部组件的另一个钩子,用于获取 slide 数据(与 SwiperSlide 插槽 props 中的数据相同)
<!-- 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>
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 end</span>
</div>
<span>Container end</span>
</div>
虚拟 Slide 的渲染完全由 Vue.js 处理,除了设置 :virtual="true"
属性和在 slide 上设置 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/modules';
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>
控制器需要将一个 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/modules';
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>
对于双向控制(当两个 Swiper 相互控制时),它应该是这样的
<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/modules';
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>
与控制器一样,我们需要存储缩略图实例并将其传递给主画廊
<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/modules';
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>
以下效果可用
要使用效果,您必须首先导入并安装它们(与所有其他模块一样)。
您可以在此处找到正在运行的效果演示。
<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/modules';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/effect-fade';
export default {
components: {
Swiper,
SwiperSlide,
},
setup() {
return {
EffectFade,
};
},
};
</script>
如您所见,将 Swiper 集成到您的网站或应用中非常容易。以下是您接下来的步骤