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动画效果类封装代码
Aug 28 Javascript
jQuery1.6 类型判断实现代码
Sep 01 Javascript
详解 javascript中offsetleft属性的用法
Nov 11 Javascript
微信小程序  生命周期详解
Oct 27 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
Oct 08 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
Jul 10 Javascript
简单分析js中的this的原理
Aug 31 Javascript
jquery实现直播弹幕效果
Nov 28 jQuery
JS如何定义用字符串拼接的变量
Jul 11 Javascript
vue实现lodop打印功能的示例
Nov 11 Javascript
js+html+css实现手动轮播和自动轮播
Dec 30 Javascript
JavaScript文档对象模型DOM
Nov 20 Javascript
通过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
php环境配置 php5 mysql5 apache2 phpmyadmin安装与配置
2006/11/17 PHP
PHP语法速查表
2006/12/06 PHP
php读取mysql的简单实例
2014/01/15 PHP
PHP中常用的转义函数
2014/02/28 PHP
php封装的单文件(图片)上传类完整实例
2016/10/18 PHP
PHP经典设计模式之依赖注入定义与用法详解
2019/05/21 PHP
一个JQuery操作Table的代码分享
2012/03/30 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
2012/04/11 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
2012/08/14 Javascript
js中cookie的添加、取值、删除示例代码
2013/10/21 Javascript
JS设置下拉列表框当前所选值的方法
2015/12/22 Javascript
利用Angularjs和Bootstrap前端开发案例实战
2016/08/27 Javascript
JavaScript中this的四个绑定规则总结
2016/09/26 Javascript
Node.js的Mongodb使用实例
2016/12/30 Javascript
旺旺在线客服代码 旺旺客服代码生成器
2018/01/09 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
2018/07/25 jQuery
JS手写一个自定义Promise操作示例
2020/03/16 Javascript
JS模拟实现京东快递单号查询
2020/11/30 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
2021/01/20 Javascript
[49:17]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第三场 1月26日
2021/03/11 DOTA
python复制文件代码实现
2013/12/23 Python
详解Pytorch 使用Pytorch拟合多项式(多项式回归)
2018/05/24 Python
pygame游戏之旅 游戏中添加显示文字
2018/11/20 Python
Python实现将HTML转成PDF的方法分析
2019/05/04 Python
pip安装tensorflow的坑的解决
2020/04/19 Python
联想马亚西亚官方网站:Lenovo Malaysia
2018/09/19 全球购物
房屋改造计划书
2014/01/10 职场文书
运动会领导邀请函
2014/01/10 职场文书
幼儿园教师师德师风演讲稿:我自豪我是一名幼师
2014/09/10 职场文书
党员批评与自我批评思想汇报(集锦)
2014/09/14 职场文书
工资收入证明
2014/10/07 职场文书
工伤事故处理协议书怎么写
2014/10/15 职场文书
优秀班主任事迹材料
2014/12/16 职场文书
素质拓展训练感想
2015/08/07 职场文书
数学复习课教学反思
2016/02/18 职场文书