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

news2024/9/27 3:30:30

首先安装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