自然卷 Swiper开篇

一 关于Swiper swiper是一款轻量级以及免费的移动设备触控滑块的js框架,主要运用于移动端的操作,但也可以用于pc端页面效果制作,完全的开源免费, 二 学习Swiper  Swiper官网提供了学习方法以及API文档,为我们学习提供了很大的帮助,在学习之前可以先看一下官网的在线演示效果,包括基础演示和精彩移动端以及PC端的页面展示,了解Swiper的精彩之处,下面通过一个京东主页面的轮播来介绍Swiper(京东轮播图属于固定大小的轮播图,比较简单) 1.准备工作 首先我们需要下载swiper,官方网站提供,可以下载完整的zip文件包,也可以只下载这三个文件(jquery-1.11.3.min.js swiper.min.js swiper.min.css ),新建文件夹js和css,将js文件放在js中,将css文件放在css中,同时去京东官网获取轮播图片,放在image文件夹下 2 新建html文件 将下载的文件引入到页面中,官网中介绍了,首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件。可下载Swiper文件或使用CDN 复制代码 京东轮播 复制代码 3 HTML内容。 复制代码
//一个大容器装载内容,高度是有内部的内容撑起
//就是下面的小圆点
//向左的箭头
//向右的箭头 复制代码 3 .给Swiper定义一个大小 因为京东图片大小为540*470,你可以直接在swiper-container中定义大小,也可以重新定义一个class来定义大小(此处我用myswiper) 复制代码 *{ margin:0; padding:0; } .myswiper{ width:590px; height: 470px; } 复制代码 4.初始化Swiper:最好是挨着标签(如果没有紧挨着可以在函数前加onload函数) 复制代码 复制代码 完整代码 复制代码 京东轮播
<
>
复制代码 分类: swiper 好文要顶 关注我 收藏该文 xu-qianqian 关注 - 2 粉丝 - 3 +加关注 0 0 « 上一篇:JSON » 下一篇:Swiper实现全屏视觉差轮播 posted on 2018-09-04 11:09 xu-qianqian 阅读(95) 评论(0) 编辑 收藏 刷新评论刷新页面返回顶部 注册用户登录后才能发表评论,请 登录 或 注册,访问网站首页。 【推荐】超50万VC++源码: 大型组态工控、电力仿真CAD与GIS源码库! 【免费】要想入门学习Linux系统技术,你应该先选择一本适合自己的书籍 【前端】SpreadJS表格控件,可嵌入应用开发的在线Excel 【推荐】企业SaaS应用开发实战,快速构建企业运营/运维系统 腾讯云0831 最新IT新闻: · 特斯拉上海公司注册资本大增至46.7亿 · 360安全大脑监测发现 九成APP本不该读你的通讯录 · 嘀嗒出行联合十二城发起倡议书 让夜归人都能安心回家 · 明州警方检方周五回应:刘强东案尚未结案 仍在调查 · 铁打的营盘流水的兵:盘点2016年来特斯拉离职的30多位高管 » 更多新闻... 华为云0908 最新知识库文章: · 在学习中,有一个比知识更重要的能力 · 如何招到一个靠谱的程序员 · 一个故事看懂“区块链” · 被踢出去的用户 · 成为一个有目标的学习者 » 更多知识库文章... Powered by: 博客园 Copyright © xu-qianqian < 2018年9月 > 日 一 二 三 四 五 六 26 27 28 29 30 31 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 1 2 3 4 5 6 导航 博客园 首页 新随笔https://www.cnblogs.com/qianqian-it/p/9583300.html
50000+
5万行代码练就真实本领
17年
创办于2008年老牌培训机构
1000+
合作企业
98%
就业率

联系我们

电话咨询

0532-85025005

扫码添加微信