1.vue3.0+swiper7轮播图片插件填坑记录

luanmabug

已于 2022-01-27 01:57:20 修改

阅读量2.1k

点赞数 6

分类专栏： # vue3插件文章标签： vue3 swiper7 vue-cli4.5 swiper/vue报错 swiper插件

于 2022-01-11 14:29:54 首次发布

本文链接：https://blog.csdn.net/yangyangdt/article/details/122431865

版权

本文记录了在Vue3项目中使用Swiper7.2.0轮播图插件遇到的问题及解决过程，包括安装、导入、修复依赖错误、更改轮播功能和样式，提供了可执行的完整代码。

摘要由CSDN通过智能技术生成

#1.vue3.0+swiper7轮播图片插件填坑记录

前言：

写vue3打算找个轮播插件，找到了swiper, 当然复制官网你就错了（官方的常规操作）。

照着博客，我安了@7又卸载安@6，一坑未平，一坑又起，不堪其扰，烦不胜烦。

找了半天博客，总之还是被我找到成功经验了。

参考这位大佬我才做出来，爱唱歌的前端

肯定不少小伙伴都在swiper上踩坑了，记录下供参考。（一次性成功代码请直接拉到目录四）

一、安装

最新版本的 swiper@7.4.1用的时候报错了。所以我照着大佬的安的7.2.0.

插件版本：swiper@7.2.0

vue版本：vue3.0+cli4.5

安装：

npm install --save swiper@7.2.0

二、导入

局部导入：在组件中导入

因为轮播插件并不是全局都要用，更多的是首页轮播，所以我们给用它的组件下边导入即可。

我们把官网的代码复制到自己的项目中。

<template>
  <swiper
    :modules="modules"
    :slides-per-view="3"
    :space-between="50"
    navigation
    :pagination="{ clickable: true }"
    :scrollbar="{ draggable: true }"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    ...
  </swiper>
</template>
<script>
  // import Swiper core and required modules
  import {
    Navigation, Pagination, Scrollbar, A11y } from 'swiper';

  // Import Swiper Vue.js components
  import {
    Swiper, SwiperSlide } from 'swiper/vue';

  // Import Swiper styles
  import 'swiper/css';
  import 'swiper/css/navigation';
  import 'swiper/css/pagination';
  import 'swiper/css/scrollbar';

  // Import Swiper styles
  export default {
   
    components: {
   
      Swiper,
      SwiperSlide,
    },
    setup() {
   
      const onSwiper = (swiper) => {
   
        console.log(swiper);
      };
      const onSlideChange = (