vue2踩坑之项目：Swiper轮播图使用

首先安装swiper插件

npm i swiper@5

安装出现错误：npm ERR

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @vue/eslint-config-standard@6.1.0
npm ERR! Found: eslint-plugin-vue@8.7.1
npm ERR! node_modules/eslint-plugin-vue
npm ERR!   dev eslint-plugin-vue@"^8.0.3" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer eslint-plugin-vue@"^7.0.0" from @vue/eslint-config-standard@6.1.0
npm ERR! node_modules/@vue/eslint-config-standard
npm ERR!   dev @vue/eslint-config-standard@"^6.1.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: eslint-plugin-vue@7.20.0
npm ERR! node_modules/eslint-plugin-vue
npm ERR!   peer eslint-plugin-vue@"^7.0.0" from @vue/eslint-config-standard@6.1.0
npm ERR!   node_modules/@vue/eslint-config-standard
npm ERR!     dev @vue/eslint-config-standard@"^6.1.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\jing\AppData\Local\npm-cache\eresolve-report.txt for a full report.npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\jing\AppData\Local\npm-cache\_logs\2023-03-22T08_20_28_486Z-debug-0.log

解决方法：npm 版本太高，切换一下就好了

如下代码 运行后再重新 npm i

npm install npm@6.14.15 -g

引入Swiper

// 可以直接在组件里引入这个文件

//导入js

import Swiper from "swiper";

//引入css

import "swiper/css/swiper.min.css";

代码：

//html结构
<template><!-- 记得将swiper修改过来 --><div class="swiper-container" id="swiperContainer"><div class="swiper-wrapper"><div class="swiper-slide" style="background-color: #0091FE;"><h1>Page 01</h1></div><div class="swiper-slide" style="background-color: #43D7B5;"><h1>Page 02</h1></div><div class="swiper-slide" style="background-color: #6DD400;"><h1>Page 03</h1></div><div class="swiper-slide" style="background-color: #F7B500;"><h1>Page 04</h1></div><div class="swiper-slide" style="background-color: #F96400;"><h1>Page 05</h1></div></div><!-- 如果不需要以下功能，注释即可 --><!-- 如果需要分页器 --><div class="swiper-pagination"></div><!-- 如果需要导航按钮 --><div class="swiper-button-prev swiper-button-black"></div><div class="swiper-button-next swiper-button-black"></div><!-- 如果需要滚动条 --><div class="swiper-scrollbar"></div></div>
</template>//js
//mounted里面调用
export default {components: {},setup() {return {// modules: [Pagination],};},methods: {},mounted() {var Myswiper = new Swiper(".swiper-container", {loop: true, // 循环模式选项slidesPerView: 3,centeredSlides: true,centeredSlidesBounds: true,// 自动轮播autoplay: {delay: 1300,stopOnLastSlide: false,disableOnInteraction: true,waitForTransition: false,pauseOnMouseEnter: true, // 鼠标悬停暂停轮播},// 翻转effect: 'coverflow',slidesPerView: 3,centeredSlides: true,coverflowEffect: {rotate: 30,stretch: 10,depth: 60,modifier: 2,slideShadows: true},// 如果需要分页器pagination: {el: ".swiper-pagination",clickable: true,},// 下一页，上一页navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},// 滚动条scrollbar: {el: ".swiper-scrollbar",hide: true,draggable: true, //是否可拖动条snapOnRelease: true, //false释放滚动条时slide不会自动贴合dragSize: 500,},});/*鼠标移入停止轮播，鼠标离开 继续轮播*/var container = document.getElementById('swiperContainer');container.onmouseover = function () {Myswiper.autoplay.stop();};container.onmouseout = function () {Myswiper.autoplay.start();}},//css
<style scoped lang="scss">
.swiper-container {position: relative;display: inline-block;width: 100%;height: 24rem;overflow: hidden;background-color: #ECECEC;--swiper-pagination-color: #ffbb00; // 分页器颜色/* 设置Swiper风格 */--swiper-theme-color: #ff6600;/* 单独设置按钮颜色 */--swiper-navigation-color: #00aaff;/* 设置按钮大小 */--swiper-navigation-size: 30px;h1 {color: #fff;position: relative;top: 40%;}.swiper-slide {img {width: 100%;height: 100%;}.bannerTitle {line-height: 2rem;width: 100%;position: absolute;height: 2rem;bottom: 0px;left: 10px;background: rgba(0, 0, 0, 0.5);color: rgba(255, 255, 255, 0.9);z-index: 9999;.titleC {width: 26rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}}}
}
</style>

---

上一篇文章， 

vue3+elementPlus：el-select选择器里添加按钮button_意初的博客-CSDN博客vue3+elementPlus：el-select选择器里添加按钮button，在el-select的option后面添加buttonhttps://blog.csdn.net/weixin_43928112/article/details/133681154