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/[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";

代码：

//html结构



//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

---

上一篇文章， 

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