首先请参考下边这个连接，安装正确的swiper 特别说明一定是vue3，vue2使用是会报错的

vue3 中使用 swiper_@swiper_jjw_zyfx的博客-CSDN博客

其次：

<template><swiperclass="swiperWrap":slides-per-view="3":space-between="50"navigation:pagination="{ clickable: true }":scrollbar="{ draggable: true }"@swiper="onSwiper"@slideChange="onSlideChange"@slidePrevTransitionEnd = "onSlidePrevTransitionEnd"@slideNextTransitionEnd = "onSlideNextTransitionEnd"><!--首先可以在  swiper 上设置高度和宽度:scrollbar="{ draggable: true }" 就是显示下边的横向的线的 暂时就发现个这，别的用法暂没试出来navigation 是用来控制向左和向右点击的那两个箭头按钮:pagination="{ clickable: true }" 是用来控制最底部的几个点的@slidePrevTransitionEnd 这个就是swiper中的官方文档中的事件（event）中的一个当滑块向前滚动结束后调用的方法，在vue中的用法就是如此--><swiper-slide>Slide 1</swiper-slide><swiper-slide>Slide 2</swiper-slide><swiper-slide>Slide 3</swiper-slide><swiper-slide>Slide 4</swiper-slide><swiper-slide>Slide 5</swiper-slide><swiper-slide>Slide 6</swiper-slide>...</swiper></template>
<script>
// Import Swiper Vue.js components
import SwiperCore, { Navigation,Virtual, Pagination, Scrollbar, A11y } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/swiper.scss';
import 'swiper/components/navigation/navigation.scss'; // 用到那个导那个的包
import 'swiper/components/pagination/pagination.scss';
import 'swiper/components/scrollbar/scrollbar.scss';SwiperCore.use([Navigation, Virtual,Pagination, Scrollbar, A11y]);
export default {components: {Swiper,SwiperSlide,},methods: {onSwiper(swiper) {console.log("111", swiper);},onSlideChange() {console.log('slide change');},onSlidePrevTransitionEnd(){console.log("向前滚动结束了")},onSlideNextTransitionEnd(){console.log("向后滚动结束了")},},
};
</script>
<style lang="scss">body{margin: 0;}.swiper-container {width: 100%;/*height: 300px;*/ /* 这个是用来控制整体的swiper的高度的如果只是用导航就写的小点，如果是用作轮播，就写的大点，总之根据你的需要来写*/.swiper-slide {text-align: center;font-size: 18px;background: pink;height: 50px; // 这个就是控制中间滑块的高度的 如果不用做导航，可以设置成100%display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}/*点击它 进去就能找到如下原码，复制过来修改即可import 'swiper/components/navigation/navigation.scss';*/.swiper-button-prev,.swiper-container-rtl .swiper-button-next{left: 0;&:after {background-color: deeppink;}}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{right: 0;&:after {background-color: deeppink;}}}
</style>

具体就是：

1、只用作导航效果如下：

swiper中的代码只修改如下部分

css中的代码如下：

2、向做成轮播图的效果如下：

swiper中的只修改如下部分

css中的修改如下：

箭头的修改：

效果如下：

swiper中的事件的使用：

官网位置：

slideNextTransitionEnd(swiper)_Swiper参数选项

中的：

如果想要自动播放

设置如下：

这样设置就能自动播放了，我猜测的根据文档如下所示：

经试验是这样用的：

vue 使用swiper详细步骤相关推荐

Vscode创建vue项目的详细步骤
目录一.概述操作的前提二.操作步骤一.概述后端人员想在IDEA里面创建一个Vue的项目,但是这非常麻烦,用vscode这个前端专用软件创建就会非常快速. 操作的前提 1.安装vscode软件 ...
如何使用vue-cli来搭建vue项目？详细步骤跟着我来吧！
目录一.什么是vue-cli? 二.前提:搭建好NodeJS环境安装vue-cli 三.使用脚手架vue-cli(2.X版)来构建项目第一步第二步第三步第三步第四步三.SPA完成路由的 ...
如何运行vue项目（详细步骤）
1.首先,将项目里的"node_modules"文件夹删除,这是vue项目的依赖包. 因为"node_modules"文件夹太大,一般不会打包上传到svn.gi ...
Vue插件安装详细步骤
1.插件安装网址 https://chrome.zzzmh.cn/index 安装完后,运行含Vue的代码发现,控制台显示插件没安装,对次解决方法看另外一篇 2.打开网址 3. 4. 5. 6. 7. ...
用VUE实现一个具有登陆、注册等功能的网站【详细步骤】
用VUE实现一个具有登陆.注册等功能的网站[详细步骤] 用VUE实现一个具有登陆.注册等功能的网站[详细步骤] 一.主要功能二.实现思路 1.页面设计 2.功能设计 3.重点和难点三.代码实现 1 ...
Vue引入 mavon-editor 编辑器的详细步骤
Vue引入 mavon-editor 编辑器的详细步骤一.编辑器的引入如果你的项目之前没有安装过该编辑器,那就得先安装编辑器在自己的项目的根目录执行下列命令: npm install mavon ...
Vue中使用echarts的超详细步骤
1.准备工作首先在echarts官方选择好自己需要使用的图表,并配置完成新建一个vue文件 2.正式配置 HTML代码段: 注意id内的命名与下述getElementById一致 <temp ...
Vue CLI安装的详细步骤
Vue CLI安装的详细步骤为了以后安装方便,写一个具体的步骤. 1.首先,打开vue官网,在生态系统的工具里找到Vue CLI,点击安装,先全局安装,直接打开cmd命令,执行以下命令.(我选的第一 ...
Vue后台 - 利用 mockjs 完成数据的获取、编辑、增加、删除和分页【详细步骤篇】
文章目录一.前言二.项目原型和大致需求在这里插入图片描述三.项目目录四.详细步骤 1.新建一个mock文件,写接口,在页面中调用拿到mock数据 2.获取数据,完成分页和查询功能 3.新增. ...

vue 使用swiper详细步骤