首先安装swiper插件
npm i swiper@5
安装出现错误：npm ERR
javascript
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @vue/[email protected]
npm ERR! Found: [email protected]
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/[email protected]
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: [email protected]
npm ERR! node_modules/eslint-plugin-vue
npm ERR! peer eslint-plugin-vue@"^7.0.0" from @vue/[email protected]
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 [email protected] -g
引入Swiper
// 可以直接在组件里引入这个文件
//导入js
import Swiper from "swiper";
//引入css
import "swiper/css/swiper.min.css";
代码：
javascript
//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>上一篇文章，