效果展示

简介版本

安装Swiper

项目终端中npm i swiper即可
这里我个人用的是 npm i swiper -S

用法

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

import {Swiper, SwiperSlide} from 'swiper/vue'; //swiper所需组件

点击可以参考swiper中使用vue官方文档

完整代码展示

html静态展示

<template><div class="project"><div class="project-swiper"><swiper:slidesPerView="7":spaceBetween="10":loop="true":centeredSlides="false":autoplay="{delay: 2000,disableOnInteraction: false}":navigation="navigation":modules="modules"class="mySwiper"><swiper-slide v-for="num in 14" :key="num"><div class="swiper-content"><div><img src="@/assets/homePage/组件%2062%20–%201.png" alt="" style="width: 58px;height: 58px; "/></div><p class="swiper-content-text">星云大数据</p></div></swiper-slide></swiper><div class="write"></div>//左右两侧的方向按钮<div class='button-prev' @click.stop='prevEl'><img src="@/assets/homePage/组件%2063%20–%202.png" alt=""></div><div class='button-next' @click.stop='nextEl'><img src="@/assets/homePage/组件%2063%20–%201.png" alt=""></div></div></div>
</template>

注 ：slidesPerView 为显示个数，一页多图单轮播设置个数即可

左右按钮的外部设置，与swiper 标签同级即可
如果需要设置里面，与swiper-slide标签同级即可

js逻辑展示（vue3 — ts）

<script setup lang="ts">
import {Swiper, SwiperSlide} from 'swiper/vue'; // swiper所需组件
// 这是分页器和对应方法，swiper好像在6的时候就已经分离了分页器和一些其他工具
import {Autoplay, Navigation, Pagination, A11y} from 'swiper';
// 引入swiper样式，对应css 如果使用less或者css只需要把scss改为对应的即可
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import {ref} from "vue";
// setup语法糖只需要这样创建一个变量就可以正常使用分页器和对应功能，如果没有这个数组则无法使用对应功能
const modules = [Autoplay, Pagination, Navigation, A11y];
const navigation = ref({nextEl: '.button-next',prevEl: '.button-prev',
})
const prevEl = () => {// console.log('上一张' + index + item)
}
const nextEl = () => {// console.log('下一张')
}
</script>

官方文档导入模块

默认情况下，Swiper Vue 使用 Swiper 的核心版本（没有任何附加模块）。如果你想使用Navigation、Pagination等模块，你必须先安装它们：

以下是从以下位置导入的其他模块的列表swiper/modules：

//例如
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper/modules';

• Virtual- 虚拟幻灯片模块

• Keyboard- 键盘控制模块

• Mousewheel- 鼠标滚轮控制模块

• Navigation- 导航模块

• Pagination- 分页模块

• Scrollbar- 滚动条模块

• Parallax- 视差模块

• FreeMode- 自由模式模块

• Grid- 网格模块

• Manipulation- 幻灯片操作模块（仅适用于Core版本）

• Zoom- 变焦模块

• Controller- 控制器模块

• A11y- 辅助功能模块

• History- 历史导航模块

• HashNavigation- 哈希导航模块

• Autoplay- 自动播放模块

• EffectFade- 淡入淡出效果模块

• EffectCube- 立方体效果模块

• EffectFlip- 翻转效果模块

• EffectCoverflow- Coverflow效果模块

• EffectCards- 卡牌效果模块

• EffectCreative- 创意效果模块

• Thumbs- 拇指模块

  资源源自官方vue使用swiper官方文档 (https://swiperjs.com/vue) 或 ` 点击跳转

css样式展示 （自行更改所需）

<style scoped lang="scss">
.project {width: 94%;padding: 35px 0;margin: auto;&-swiper {position: relative;width: 84%;margin: auto;//padding-left: 3px;swiper {width: 100%;swiper-slide {height: 100%;box-shadow: 0 3px 6px 1px rgba(0, 0, 0, 0.16);border-radius: 4px 4px 4px 4px;opacity: 1;border: 1px solid #E4E5EA;//width: 100%;background: #F9FAFE;}}.button-prev {position: absolute;top: 66px;left: -45px;}.button-next {position: absolute;top: 66px;right: -45px;}}
}.swiper-content {text-align: center;//width: 176px;height: 94px;margin: 40px 0;border-right: 1px solid #E4E5EA;&-text {margin: 11px auto 0;width: 127px;height: 25px;font-size: 16px;//font-family: Microsoft YaHei-Regular, Microsoft YaHei;font-weight: 400;color: #2F353B;line-height: 25px;-webkit-background-clip: text;//-webkit-text-fill-color: transparent;}}.write {width: 4px;background-color: #FFFFFF;height: 176px;position: absolute;top: 0;right: 0;z-index: 99;
}
</style>

官方文档样式

Swiper 包包含不同的 CSS、Less 和 SCSS 样式集：

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 Effect 模块所需的样式
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	Thumbs 模块所需的样式
swiper/css/virtual	虚拟模块所需的样式
swiper/css/zoom	Zoom 模块所需的样式

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

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

对于 SCSS 样式，替换css为scss导入路径，例如：

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

资源源自官方vue使用swiper官方文档 (https://swiperjs.com/vue) 或 ` 点击跳转