首先安装swiper插件
npm i swiper@5
- 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
// 可以直接在组件里引入这个文件
//导入js
import Swiper from "swiper";
//引入css
import "swiper/css/swiper.min.css";
代码:
- //html结构
-
- <div class="swiper-container" id="swiperContainer">
- <div class="swiper-wrapper">
- <div class="swiper-slide" style="background-color: #0091FE;">
- <h1>Page 01h1>
- div>
- <div class="swiper-slide" style="background-color: #43D7B5;">
- <h1>Page 02h1>
- div>
- <div class="swiper-slide" style="background-color: #6DD400;">
- <h1>Page 03h1>
- div>
- <div class="swiper-slide" style="background-color: #F7B500;">
- <h1>Page 04h1>
- div>
- <div class="swiper-slide" style="background-color: #F96400;">
- <h1>Page 05h1>
- 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>
-
-
- //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>
上一篇文章,