Vue swiper轮播的报错解决和使用

水深无声 2024-04-01 19:01 62阅读 0赞

## 一、swiper插件下载 ##

问题一：照着一些老一版教程只安装了vur-awesome-swiper

这种情况肯定是用不了的，需要先npm install swiper --s

npm install swiper --s

问题二：引入swiper时没引入css

import Swiper from 'swiper'
    import 'swiper/dist/css/swiper.css'

通常就是这样写的路径，可以自己在node-modules里找一下，可以全局引入也可以局部引入，我是局部引入的

如果swiper版本高的话6.0以上不能用旧的导入方式，在main.js里

import "swiper/swiper-bundle.css";

问题三：过程中可能出现各种报错总结起来问题大部分就是版本不匹配之类的

npm install vue-awesome-swiper@6.3.5 --save

另外main.js引入：

//新版本
    
    import VueAwesomeSwiper from 'vue-awesome-swiper'
    import 'swiper/swiper-bundle.css'
    Vue.use(VueAwesomeSwiper, /* { default options with global component } */)
    
    
    //旧版本
    import vueSwiper from 'vue-awesome-swiper'
    import 'swiper/css/swiper.css'
    Vue.use(vueSwiper)

## 二、swiper的使用 ##

![c178a8d182784e6580f539b1a5e2b591.png][]

在swiper组件中：

<template>
      <div class="swiper-main">
        <swiper :options="swiperOption">
          <div class="swiper-button-prev" slot="button-prev"></div>
          <swiper-slide v-for="(item, index) in swiperList" :key="index">
            <img :src="item.imgUrl" alt="" />
          </swiper-slide>
    
          <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
        <div class="swiper-pagination"></div>
      </div>
    </template>

我简单实验写死了一些图片数据，设置了swiper的一部分用得到的相关参数比如轮播速度、下面的小圆点页数、左右翻页这些

<script>
    // import 'swiper/swiper-bundle.css'
    import "swiper/css/swiper.css";
    import { swiper, swiperSlide } from "vue-awesome-swiper";
    export default {
      data() {
        return {
          swiperList: [
            {
              id: 1,
              imgUrl: "/images/swiper1.png",
            },
            {
              id: 2,
              imgUrl: "/images/swiper2.png",
            },
            {
              id: 3,
              imgUrl: "/images/swiper3.png",
            },
            {
              id: 4,
              imgUrl: "/images/swiper1.png",
            },
            {
              id: 5,
              imgUrl: "/images/swiper2.png",
            },
            {
              id: 6,
              imgUrl: "/images/swiper3.png",
            },
          ],
          swiperOption: {
            pagination: {
              el: ".swiper-pagination",
            },
            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            },
            autoplay: 3000,
            speed: 1000,
          },
        };
      },
      components: {
        swiper,
        swiperSlide,
      },
    };
    </script>

具体样式的话自己调整就好，用检查工具看看他的类名是什么然后修改成自己想要的就行了

[c178a8d182784e6580f539b1a5e2b591.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/bd65dbc0c23d4f0bbe6de8c1d72396ea.png

发表评论取消回复

表情：

评论列表（有 0 条评论，62人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue swiper轮播的报错解决和使用

一、swiper插件下载问题一：照着一些老一版教程只安装了vur-awesome-swiper 这种情况肯定是用不了的，需要先npm install swiper -

水深无声/ 2024年04月01日 19:01/ 0 赞/ 63 阅读

相关 Vue轮播图（swiper）

Vue轮播图（swiper）注意：swiper版本为5.x.x时，import才能引入成功 1. 在terminal中输入,引入swiper依赖 --

骑猪看日落/ 2023年03月04日 06:46/ 0 赞/ 5 阅读

相关 vue 使用 swiper 实现轮播的那些事

首先运行 npm下载 npm install swiper --save-dev 在需要用到的页面中 <template> <div cla

╰半橙微兮°/ 2022年12月22日 11:23/ 0 赞/ 172 阅读

相关初识vue（12）—— 使用 swiper 实现轮播

swiper 中文网地址：[http://www.swiper.com.cn/][http_www.swiper.com.cn] 1. 下载 swiper > npm

川长思鸟来/ 2022年10月30日 07:25/ 0 赞/ 178 阅读

相关【VUE】使用swiper时轮播失效的BUG-已解决

场景使用swiper每次到最后一张就停止轮播了设置的 loop: true 仿佛没有效果原因在vue的v-for中时，异步加载的数据都还没

爱被打了一巴掌/ 2022年09月04日 00:40/ 0 赞/ 247 阅读

相关 Vue封装Swiper实现图片轮播

> 图片轮播是前端中经常需要实现的一个功能。最近学习Vue.js，就针对Swiper进行封装，实现一个简单的图片轮播组件。一、Swiper 在实现封装之前，先介绍一下

ゞ浴缸里的玫瑰/ 2022年05月31日 03:54/ 0 赞/ 267 阅读

相关 vue中使用轮播图 Vue-Awesome-Swiper

既然vue是基于组件进行开发的，那么适合组件的轮播图就用vue-awesome-swiper 吧，这个就是swiper，不过弄了一个适合vue的东西; 官方这样

我不是女神ヾ/ 2022年05月25日 01:08/ 0 赞/ 238 阅读

相关使用swiper.js写轮播

初涉swiper.js，记录一下使用过程 1.首先引入js和css <script src="./js/swiper-3.4.2.jquery.min.js"><

「爱情、让人受尽委屈。」/ 2022年05月14日 10:14/ 0 赞/ 249 阅读

相关 vue使用swiper实现轮播图代码

<div v-swiper:mySwiper="swiperOption"> <div class="swiper-wrapper">

悠悠/ 2022年04月12日 11:46/ 0 赞/ 265 阅读

相关 Vue - Vue 中 vue-awesome-swiper 轮播组件的使用

vue-swiper轮播组件使用一. vue-awesome-swiper官网 [https://www.npmjs.com/package/vue-awesom

水深无声/ 2021年07月25日 23:49/ 0 赞/ 1543 阅读