vue使用swiper实现中间大两边小的轮播图效果


Posted in Javascript onNovember 24, 2019

项目中使用的vue,刚好有需求要实现轮播图,突出显示当前图片,两边展示其他图片;通过查各种资料,实现了,故在此记录下来

下面我们来看下实现步骤:

  • 第一步:首先在项目index.html中引入swiper的css文件- swiper.min.css
  • 第二部:写入dom结构
<div class="swiper-container">
 <div class="swiper-wrapper">
  <div
   v-for="(item, i) in pictures"
   :key="i"
   class="swiper-slide"
  >
   <!-- 具体内容 -->
   <img
    :src="item.advertiseImages"
    alt="商品图片"
   >
  </div>
 </div>
</div>

第三步:在项目中使用npm安装swiper模块

npm install swiper --save-dev

JS中文网 - 前端进阶资源教程www.javascriptC.com 一个致力于帮助开发者用代码改变世界为使命的平台,每天都可以在这里找到技术世界的头条内容

第四步:在vue文件中引入,并初始化swiper; 先引入swiper

import Swiper from "swiper";

注意初始化需要放入mounted钩子中哦

import Swiper from "swiper";

export default {
 data() {
 return {
 }
 },
 mounted() {
 var mySwiper = new Swiper(".swiper-container", {
   direction: "horizontal",
   loop: false,
   slidesPerView: "auto",
   centeredSlides: true,
   spaceBetween: 20,
   observer: true,
   observeParents: true
 });
 }
}

如果你的项目中,图片是从后台接口获取,那么上面的初始化可能会出问题,这个时候我们采取另外的方式初始化swiper

import Swiper from "swiper";

export default {
 data() {
 return {
  mySwiper: null
 }
 },
 methods: {
 getdata() {
  promise.then(res => {
  this.pictures = res.images || [];
  this.$nextTick(() => {
   this.initSwiper();
  });
  });
 },
 initSwiper() {
   this.mySwiper = new Swiper(".swiper-container", {
    direction: "horizontal",
     loop: false,
     slidesPerView: "auto",
     centeredSlides: true,
     spaceBetween: 20,
     observer: true,
     observeParents: true
   });
   }
 }
}

把swiper的初始化放入vue的nextTick中执行,就解决掉问题啦

第五步:如果想获取当前滚动到哪一张图片怎么办呢

this.mySwiper.activeIndex;

使用activeIndex属性就可以获取到当前图片的索引啦。 那么我们这个功能就完成啦

总结

以上所述是小编给大家介绍的vue使用swiper实现中间大两边小的轮播图效果,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
javascript中length属性的探索
Jul 31 Javascript
获取select元素被选中的文本内容的js代码
Jan 29 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
Aug 22 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
Aug 23 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
Dec 28 Javascript
深究AngularJS中ng-drag、ng-drop的用法
Jun 12 Javascript
Angular4实现鼠标悬停3d倾斜效果
Oct 25 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
Sep 27 Javascript
Vue中Axios从远程/后台读取数据
Jan 21 Javascript
微信小程序中为什么使用var that=this
Aug 27 Javascript
JS检测浏览器开发者工具是否打开的方法详解
Oct 02 Javascript
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
通过GASP让vue实现动态效果实例代码详解
Nov 24 #Javascript
JS控制只能输入数字并且最多允许小数点两位
Nov 24 #Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
Nov 24 #Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
Nov 24 #Javascript
mpvue微信小程序开发之实现一个弹幕评论
Nov 24 #Javascript
node.js中Buffer缓冲器的原理与使用方法分析
Nov 23 #Javascript
node.js中事件触发器events的使用方法实例分析
Nov 23 #Javascript
You might like
用Flash图形化数据(二)
2006/10/09 PHP
windows下apache搭建php开发环境
2015/08/27 PHP
Yii使用技巧大汇总
2015/12/29 PHP
Gambit vs CL BO3 第一场 2.13
2021/03/10 DOTA
Prototype使用指南之form.js
2007/01/10 Javascript
Jquery 设置标题的自动翻转
2009/10/03 Javascript
吐槽一下我所了解的Node.js
2014/10/08 Javascript
从数据库读取数据后将其输出成html标签的三种方法
2014/10/13 Javascript
js style动态设置table高度
2014/10/21 Javascript
jquery实现手机号码选号的方法
2015/07/31 Javascript
js计算文本框输入的字符数
2015/10/23 Javascript
javascript实现label标签跳出循环操作
2016/03/06 Javascript
JavaScript获取客户端IP的方法(新方法)
2016/03/11 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
2017/12/15 Javascript
JSON数据中存在单个转义字符“\”的处理方法
2018/07/11 Javascript
JavaScript设计模式之责任链模式实例分析
2019/01/16 Javascript
node(koa2) web应用模块介绍详解
2019/03/29 Javascript
微信小程序实用代码段(收藏版)
2019/12/17 Javascript
JS函数进阶之继承用法实例分析
2020/01/15 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
2020/12/23 Javascript
Python模块搜索概念介绍及模块安装方法介绍
2015/06/03 Python
Python for Informatics 第11章 正则表达式(一)
2016/04/21 Python
Python打包文件夹的方法小结(zip,tar,tar.gz等)
2016/09/18 Python
git使用.gitignore设置不生效或不起作用问题的解决方法
2017/06/01 Python
Python3的高阶函数map,reduce,filter的示例详解
2019/07/23 Python
LTD Commodities:礼品,独特发现,家居装饰,家用器皿
2017/08/11 全球购物
德国柯吉澳趣味家居:Koziol
2017/08/24 全球购物
享受加州生活方式的时尚舒适:XCVI
2018/07/09 全球购物
Spartoo荷兰:鞋子、包包和服装
2018/07/12 全球购物
AJax面试题
2014/11/25 面试题
国贸专业个人求职信分享
2013/12/04 职场文书
夫妻分居协议书范本(有子女版)
2014/11/01 职场文书
2015年团支部年度工作总结
2015/05/27 职场文书
毕业感言怎么写
2015/07/31 职场文书
德劲DE1107指针试高灵敏度全波段收音机机评
2022/04/05 无线电