官方中文文档:https://www.swiper.com.cn/
前言
本文使用的Swiper8
Vue.js 组件,
Swiper常用于移动端网站的内容触摸滑动。
提示:最底部有setup中使用示例
一、安装
npm i swiper
本次使用的版本未指定,默认安装了8.3.2
二、使用步骤
1.引入组件
// 引入Swiper Vue.js 组件
import { Swiper, SwiperSlide } from 'swiper/vue';
// 引入所需模块
import { Autoplay, Pagination, Navigation, Scrollbar } from 'swiper'
// 引入 Swiper 样式
import 'swiper/css';
// 小圆点
import 'swiper/css/pagination'
// 左右箭头
import 'swiper/css/navigation'
// 轮播图的滚动条
import 'swiper/css/scrollbar'
2.使用组件
<template>
<swiper
:modules="modules"
:slides-per-view="3"
:space-between="50"
navigation
:pagination="{ clickable: true }"
:scrollbar="{ draggable: true }"
:autoplay="{ autoplay: 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>
3.样式调整
代码如下(示例):
<style lang="less">
.swiper {
.swiper-slide {
height: 200px;
}
}
</style>
此处宽高随意调整,如需调整左右箭头,属性样式.swiper-button-prev,.swiper-button-next
三、完整示例代码
1.Vue
Vue完整代码如下(示例):
<template>
<swiper
:modules="modules"
:slides-per-view="3"
:space-between="50"
navigation
:pagination="{ clickable: true }"
:scrollbar="{ draggable: true }"
:autoplay="{ autoplay: 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 Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';
// import Swiper core and required modules
import { Navigation, Pagination, Scrollbar, Autoplay } from 'swiper';
// 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,
modules: [Navigation, Pagination, Scrollbar, Autoplay],
};
},
};
</script>
<style lang="less">
.swiper {
.swiper-slide {
height: 200px;
}
}
</style>
2.setup composition API
在setup composition API中使用:
<template>
<swiper
:modules="modules"
:slides-per-view="3"
:space-between="50"
navigation
:pagination="{ clickable: true }"
:scrollbar="{ draggable: true }"
:autoplay="{ autoplay: 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 setup>
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';
// import Swiper core and required modules
import { Navigation, Pagination, Scrollbar, Autoplay } from 'swiper';
// Import Swiper styles
import "swiper/css";
// 小圆点
import 'swiper/css/pagination'
// 左右箭头
import 'swiper/css/navigation'
// 轮播图的滚动条
import 'swiper/css/scrollbar'
const modules = [Navigation, Pagination, Scrollbar, Autoplay ];
const onSwiper = (swiper) => {
console.log(swiper);
};
const onSlideChange = () => {
console.log("slide change");
};
</script>
<style lang="less">
.swiper {
.swiper-slide {
height: 200px;
}
}
</style>