vue轮播的使用---vue-awesome-swiper（踩坑之路。。）

最新推荐文章于 2025-05-22 12:05:29 发布
最新推荐文章于 2025-05-22 12:05:29 发布
阅读量299 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： vue 文章标签： vue npm javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/BubbleABC/article/details/118460465
本文记录了在使用vue-awesome-swiper时遇到的npm安装问题和import路径错误。通过更改swiper的导入语句，从import 'swiper/css/swiper.css'更改为import 'swiper/swiper-bundle.css'，解决了由于Swiper版本导致的报错。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

vue轮播的使用：

vue-awesome-swiper官网
刚开始我就是按官网写的但是老是报错，什么原因呢？？？后来一查：
在这里插入图片描述

执行 npm install --save swiper/css/swiper.css 后提示无法安装

问题出在 main.js 中 import ‘swiper/css/swiper.css’ 这句话上

应该替换为 import ‘swiper/swiper-bundle.css’ 在 Swiper 的 Github上有所提及原因，是Swiper 的版本问题

1，在main.js中引入：
在这里插入图片描述
2，轮播组件里需要写入的内容
在这里插入图片描述
在这里插入图片描述

在vue中使用 vue-awesome-swiper
Tankic的博客
02-23 3451
文章目录介绍功能安装步骤安装vue-awesome-swiper安装swiper5.2.0相关代码及引用拓展 介绍 众所周知的图片轮播插件swiper,快速，简单，高效，稳定。不过最新的swiper6对vue的兼容却不如人意。如图： 然而vue3截止发稿日时仅为beta版，由此想要在vue中愉快的使用swiper该怎么办呢。现在给大家介绍 vue-awesome-swiper。 参考文献：vue-awesome-swiper "Swiper component for @vuejs"github高分dem
vue轮播图插件vue-awesome-swiper的使用代码实例
12-02
在你的Vue组件模板中，你可以使用`<swiper>`和`<swiper-slide>`组件来创建轮播图。例如： ```html <swiper :options="swiperOption" ref="mySwiper"> <swiper-slide v-for="item in items"></swiper-slide> ...
vue-awesome-swiper
Ton555555的博客
07-08 767
问题报错 原因 版本不一致导致 版本不一致导致， 如果是新版swiper，css地址是 import 'swiper/swiper-bundle.css' 具体参考最新https://swiperjs.com/get-started/
项目由vue2升级vue3遇到的问题之swiper
最新发布
lanlanmingyue的博客
05-22 1002
vue-awesome-swiper 是 Vue 2 时代流行的 Swiper 封装库，但它 不兼容 Vue 3。官方也没有为 Vue 3 提供更新版本Swiper 从 8.0.0 版本开始提供了原生的 Vue 3 支持，这是目前最推荐的方案：如果你是从 Vue 2 迁移到 Vue 3，建议将替换为官方的swiper/vue组件Swiper 8.4.7使用方式。
vue中swiper vue-awesome-swiper的使用方法和爬坑大法
热门推荐
zyf_baby的博客
07-08 8万+
vue中swiper vue-awesome-swiper的使用方法和爬坑大法由版本引起的一系列坑坑1坑2坑3正确的使用姿势：安装（指定版本）组件中使用 由版本引起的一系列坑 时间：2020.07.08（时间，版本很重要-坑的起源） 这两天在vue中使用swiper做轮播图，就随手百度了一下，找个帖子开始参考（坑开始了） 按照图中的方法，原计划5分钟搞定，一顿操作猛如虎，然后vue各种报错，然后再各种百度，结果开始了2天的爬坑之旅 ![在这里插入图片描述](https://img-blog.csdnimg.
vue小项目总结与笔记【五】——一个轮播图插件vue-awesome-swiper
denniszy1988的博客
03-18 237
本次使用github上的一个开源插件，使用的是2.6.7稳定版本。安装指定版本的方法：在插件名后面加@版本号 ，即可 npm install vue-awesome-swiper@2.6.7 --save 引入：需要在main.js里引入如下： import Vue from 'vue' //这个应该打包的时候就有了 import VueAwesom...
Vue 中使用vue-awesome-swiper
08-11 7053
下载 cnpm i -S vue-awesome-swiper@3 vue-awesome-swiper@3它会自动安装好匹配版本的swiper，即4.5.1 注意：下面截图中的swiper显示的是4.0.7,但其实真正安装好的是4.5.1 vue-awesome-swiper根据不同的swiper版本也对应有不同的版本，主要有三个版本： Vue-Awesome-Swiper - v2.6.7 对应 Swiper3 Vue-Awesome-Swiper - v3.1.3 对应 Swi
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果
10-16
使用时需要先安装`vue-awesome-swiper`，然后在需要使用轮播的组件中通过`import`语句引入`swiper`和`swiper-slide`组件，并在`components`选项中注册它们。 配置Swiper组件时，我们通常在`<template>`中使用`...
基于vue.js轮播组件vue-awesome-swiper实现轮播图
12-03
总之，vue-awesome-swiper 是 Vue.js 开发者在实现轮播图功能时的一个强大工具，它使得在 Vue 应用中集成 Swiper 变得简单而高效。通过熟练掌握它的用法，可以提高开发效率，提升用户体验。如果你在使用过程中遇到...
vue轮播图插件vue-awesome-swiper
11-28
Vue-Awesome-Swiper 轮播图插件，可以同时支持Vue.js（1.X ~ 2.X），兼顾PC和移动端，SPA和SSR。 例子 例子 安装设置 安装Install vue-awesome-swiper npm install vue-awesome-swiper --save vue挂载 // import ...
Vue2使用vue-awesome-swiper
a623256859的博客
06-27 776
Vue.use(VueAwesomeSwiper, /* { 全局组件的默认选项 } */）1.npm i vue-awesome-swiper@3.1.3 版本最为稳定。// 注册 vue-awesome-swiper 组件。
Vue.js - vue-awesome-swiper
Kant2048的博客
04-01 174
vue-awesome-swiper 使用（韩文） https://negabaro.github.io/archive/vue-awesome-swiper 参数（韩文） https://negabaro.github.io/archive/vue-awesome-swiper-option 参考（中文） https://blog.csdn.net/dwb123456123456/article/details/82701740 ...
Swiper、vue-awesome-swiper 插件使用
weixin_74285634的博客
06-26 1万+
swiper 及 vue-awesome-swiper 轮播插件
VUE 安装 轮播图插件（vue-awesome-swiper）
weixin_41883384的博客
03-27 1267
安装 Vue-Awesome-Swiper 设置npm install vue-awesome-swiper --save// import 引入import Vue from 'vue'import VueAwesomeSwiper from 'vue-awesome-swiper'&lt;template&gt;    &lt;div&gt;    &lt;div class="msgco...
vue使用vue-awesome-swiper
songqiu821的博客
11-02 2522
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
vue-awesome-swiper（轮播图vue插件）
HeliumLau的博客
05-02 4万+
Vue-Awesome-Swiper轮播图插件，可以同时支持Vue.js（1.X ~ 2.X），兼顾PC和移动端，SPA和SSR。例子例子安装设置安装Install vue-awesome-swipernpm install vue-awesome-swiper --savevue挂载// import import Vue from 'vue' import VueAwesomeSwiper fr
vue3 vue-awesome-swiper轮播视频
07-29
Vue3中，`vue-awesome-swiper`是一个基于Swiper库的轮播组件，它提供了一种方便的方式来创建响应式的轮播效果，包括支持视频播放。要在Vue项目中使用`vue-awesome-swiper`处理轮播视频，你需要做以下几个步骤： 1. **安装依赖**： 使用npm或yarn安装`vue-awesome-swiper`组件： ``` npm install swiper vue-awesome-swiper --save ``` 或者 ``` yarn add swiper vue-awesome-swiper ``` 2. **引入并配置**： 在你的Vue组件中导入`AwesomeSwiper`和`SwiperOption`： ```javascript import { AwesomeSwiper, SwiperOption } from 'vue-awesome-swiper' ``` 然后在组件的`components`选项中注册`AwesomeSwiper`： ```javascript components: { AwesomeSwiper }, data() { return { swiperOptions: {} // 初始化swiper配置对象 } } ``` 3. **设置视频轮播配置**： 在`swiperOptions`对象中，添加`autoplay`、`loop`等属性来控制自动播放和循环，以及针对视频类型的`observer`和`observeParents`设置以监听内容变化： ```javascript swiperOptions: { autoplay: { disableOnInteraction: false, }, loop: true, observer: true, observeParents: true, slidesPerView: 1, breakpoints: [ { // 视频适配不同屏幕尺寸 width: 768, slidesPerView: 2, } ], // 如果有视频元素，可以添加如下的事件处理器： on: { init: function () { this.$refs.mySwiper.slides.forEach((slide) => { if (slide.querySelector('video')) { slide.swiperSlide.on('click', function () { slide.swiperSlide.video.play(); }); } }); }, slideChangeTransitionEnd: function () { this.$refs.mySwiper.slides.forEach((slide) => { if (slide.querySelector('video')) { slide.swiperSlide.video.pause(); } }); } } } ``` 4. **在模板中使用**： 将`AwesomeSwiper`绑定到数据的`swiper`数组，并引用`ref`来获取Swiper实例： ```html <div ref="mySwiper"> <!-- 渲染每个滑动项 --> <swiper-slide v-for="(item, index) in swiper" :key="index"> <video src="your_video_url.mp4" autoplay></video> </swiper-slide> </div> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

钟Bubble

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值