如何在vue项目中引入swiper

最新推荐文章于 2024-10-10 17:01:55 发布
置顶 最新推荐文章于 2024-10-10 17:01:55 发布
阅读量1.4w 收藏 12
点赞数 2
分类专栏： vue 文章标签： vue引入swiper vue横向滚动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/return_js/article/details/90765283
版权
本文介绍在Vue项目中如何引入并使用swiper来实现横向滚动效果。步骤包括在页面和CSS中导入swiper相关文件，以及在组件的mounted生命周期钩子中初始化swiper方法。
摘要由CSDN通过智能技术生成

项目中有一个横向滚动的需求，用到了swiper，看看如何实现它。
1.首先在页面中引入swiper

	import Swiper from "swiper"

2.在css中引入

@import "../../node_modules/swiper/dist/css/swiper.css";
	.swiper-container{
	height: 80px;
	padding-left: 56px;
	background-image: -webkit-radial-gradient(23% 100%, #2e79c3 0%, #297bc4 100%);
}
.swiper-slide{
	width: auto!important;
	display: inline-block;
	margin-right: 40px;
	height: 80px;
	line-height: 80px;
	font-size: 32px;
	padding: 0 15px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	text-align: center;
	color: #fff;
	cursor: pointer;
}
	.swiper-container .swiper-slide .active {
		color: #666;
		background-color: #fff8eb;
		box-shadow: 0 3px 13px 0 rgba(94, 94, 94, 0.50);
	}
  1. 加入html
 <div class="swiper-container" ref="slider">
		  <div class="swiper-wrapper">
			  <div class=
最低0.47元/天 解锁文章
vue中引入swiper
吴小花的博客
03-28 1902
1.下载swiper： npm install vue-awesome-swiper --save 2.main.js文件引入vueAwesomSwiper import 'swiper/dist/css/swiper.css' //（如果使用的是2.6.0以上的版本需要自己手动去加载css） import VueAwesomeSwiper from 'vue-awesome-swipe...
在vue项目中引入swiper进而出现的坑和处理
信念之于人，犹翅膀之于鸟，信念是飞翔的翅膀
05-19 960
是给swiper设置observe，这个属性，可以告知swiper实例，当自身刷新的时候，可以初始化swiper，我看了半天的源码，希望找到到底是哪里出错了，但是没有找到，但是他可以走到init_swiper和swiper这两个文件，有兴趣的人可以自己去看看，到底为啥display 为 none 再到 block 的时候，会出现这个一些样式无法挂载到touchEnd等方法上，我也没有很清楚，但是确实很多效果都失效了。这个世界，总是会有意外发生的，尤其当你对老代码的复制特别自信的时候。
vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件
weixin_33738578的博客
10-11 600
vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件 欢迎加入前端交流群来获取视频资料以及前端学习资料：749539640 ---------------------------------------------------------- 转载文章请注明出处！ ...
关于vue2的swiper的使用
Bigelonglong的博客
10-10 632
【代码】关于vue2的swiper的使用。
vue-cli webpack 引入 swiper
jjsnc
07-26 8042
1：下载需要 swiper 的js文件和css文件 http://www.swiper.com.cn/2：下载好swiper相关的js和css，js放在static目录下，css放在assets目录下。 3：安装runtime： npm install babel-runtime 4：修改.eslintrc.js文件如下： 最后一行添加 'globals': { "Swiper":
Vue中使用Swiper
qq_40660283的博客
04-10 869
【代码】Vue中使用Swiper。
vue项目中导入swiper插件的方法
魏晋-
03-04 1843
版本选择 swiper是个常用的插件，现在已经迭代到了第四代：swiper4。 常用的版本是swiper3和swiper4，我选择的是swiper3。 安装 npm i swiper -S​​​​​​​ 查看node包的所有版本号的方法：npm view 包名 versions 加载插件 import Swiper from 'swiper'; import 'swiper/d...
vue引入新版 vue-awesome-swiper插件填坑问题
11-27
本文介绍了关于新版 vue-awesome-swiper，分享给大家，具体如下： 问题 为什么我的vue-awesome-swiper组件...在 main,js 里引入（全局）:  import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(VueAwesome
vue导入swiper_vue项目中导入swiper插件的方法
weixin_39531594的博客
12-23 358
这篇文章主要为大家详细介绍了vue项目中导入swiper插件的方法，具有一定的参考价值，可以用来参考一下。感兴趣的小伙伴，下面一起跟随512笔记的小编两巴掌来看看吧！版本选择swiper是个常用的插件，现在已经迭代到了第四代：swiper4。常用的版本是swiper3和swiper4，我选择的是swiper3。安装安装swiper3的最新版本3.4.2:代码如下：npm i swiper@3.4....
vue中引入swiper(vue中的滑块组件vue-awesome-swiper)
u011927449的博客
08-24 331
第一步安装 npm install vue-awesome-swiper --save 第二部在main.js中引入 import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(VueAwesomeSwiper) 然后就可以在组件中使用该插件 <template> <div> <swiper:options="swiperOption"ref="mySwiper"> ...
Vue cli3使用vue-awesome-swiper
热门推荐
wujing1_1的博客
05-18 13万+
https://www.npmjs.com/package/vue-awesome-swiper 官网 区别 vue-cli2 和vue-cli3 在于其中的 css 的样式不在不在 import 'swiper/css/swiper.css' vue-cli2 css 文件样式 import 'swiper/dist/css/swiper.css' 少去一个文件夹，这就是区别，其他是方法一样 ...
vue使用swiper
随笔_博客
02-13 1477
1、下载 $ npm install swiper   2、在node-modules--&gt;swiper--&gt;dist中得到swiper.css和swiper.js   3、将得到的swiper.css和swiper.js复制到static中（为了防止eslint报错）   4、在xxx.项目中引入 @import "../../static/swiperUtil/di...
vue使用Swiper
qq_44810610的博客
04-30 891
Swiper中文网 具体参考 Swiper使用方法 1、安装swiper5 npm i swiper@5 2、main.js中引入swiper及其样式 import Swiper from 'swiper' ​​​​​​​import 'swiper/css/swiper.min.css' 3、在vue中使用（图片数据是从后端获取的，放在vuex中，下面代码只是这个组件的代码，仅供参考） <template> <div class="list-conta...
在vue中使用Swiper
yxm_136452789的博客
03-01 1925
最近在学习vue,给大家分享一下，swiper在vue中的使用（两种方法）。 一，直接安装swiper 1，在项目根目录下，安装swiper npm install swiper --save 或淘宝镜像下的 cnpm install swiper --save 出现版本号，即安装成功 2,在需要使用轮播的vue页面，导入swiper css import Swiper from 'swi...
vue 中使用 swiper
博客
04-29 195
2.vue-awesome-swiper版本4。注意：它俩的版本要对应，引入其他版本可能会出错。1.引入 swiper版本5。
vue中swiper使用
m0_68716504的博客
02-21 855
在vue中使用 首先 npm install --save swiper@5 // 安装低版本的最好，这里装5.x。
vue中使用swiper插件
H-rosy的博客
08-16 9609
OK今天给大家介绍一下vue2中使用swiper插件，以及在使用中需要的问题，比如说在使用时轮播图失效的情况的解决。由下图可以看到现在swiper已经更新到了8版本了，但是需要注意的是5以上的版本是为了vue3服务的，使用时多多少少会有谢问题。如果感兴趣的话可以看看官网的介绍。这里我先给出官网介绍的使用步骤，但是它是在html中使用的并且在vue2中使用也有点问题初始化：这里需要说明的是我这里是将轮播图组件Carousle单独抽离出来封装的。OK这里需要注意的是官网中最外层包裹轮播图的div的类名是swip
swiper 在vue 中的使用（简单）
Drizzlejj的博客
07-07 9604
本次使用的是 swiper5说明：skuImageList 是图片列表，由父组件从服务器获取然后传给这个轮播子组件使用结构如下 html 结构 js部分说明：本次使用swiper5，因为是从服务器获取的数据，所以放在了 updata 生命周期中。 slidesPerView: 3, // 显示几个 height:100, // swiperlide 高度。更多其他的自定义轮播设置可以参照官方 API 也可在 watch 监听数组 skuImageList 是否发生变化利用 thsi.$ne
第三十六篇 Vue中使用Swiper
灵魂学者的博客
11-23 1306
本篇记录如何在Vue当中来使前swiper，在Vue中通过动态请求数据渲染到swiper上需要注意swiper过早的问题，在使用一些第三方库的时候有一些库是很依赖DOM操作的，那么在Vue当中就需要我们知道swiper的节点在什么时候会更新到DOM上，知道什么时候更新我们就能够进行一个Swiper的初始化；
vue项目中使用swiperjs
最新发布
10-13
在Vue.js项目中，SwiperJS是一个非常流行的轮播库，可以轻松创建响应式的触屏滑动切换效果。以下是使用SwiperJS的基本步骤： 1. **安装 SwiperJS**：首先，你需要通过npm或者yarn将Swiper添加到项目的依赖中。如果是npm，可以在命令行运行 `npm install swiper` 或者 `yarn add swiper`。 2. **引入 Swiper 实例**：在你的Vue组件中，通常在`<script>`标签内引入并注册Swiper： ```html <script> import { Swiper, SwiperSlide } from 'swiper'; export default { components: { Swiper, SwiperSlide }, data() { return { swiperOptions: {} // 初始化配置选项 }; }, mounted() { this.$refs.mySwiper = new Swiper('.swiper-container', this.swiperOptions); // 定义Swiper实例 } } </script> ``` 3. **HTML结构**：创建一个包含Swiper容器的元素，并给它一个唯一的ID，如`.swiper-container`： ```html <div class="swiper-container" ref="mySwiper"> <!-- Swiper slides go here --> <swiper-slide>Slide 1</swiper-slide> <swiper-slide>Slide 2</swiper-slide> <!-- ... --> </div> ``` 4. **配置选项**：设置swiper的各种属性，比如动画、导航条、循环等。你可以根据需求自定义`swiperOptions`对象。 5. **事件处理**：Swiper提供了一系列事件，例如`slideChange`, `slideChangeTransitionEnd`等，可以在对应的钩子函数中添加交互逻辑。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值