swiper框架的使用教程
来源:互联网 发布:ie浏览器打不开淘宝 编辑:程序博客网 时间:2024/06/06 05:44
swiper的使用教程
今天要分享的是swiper这个插件的使用,什么是swiper呢?
Swiper常用于移动端网站的内容触摸滑动;
Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。
初学者使用swiper的时候,可以在官网(http://www.swiper.com.cn/)学,但是一开始的时候,建议不要直接看它的API文档。可以在先下载swiper,选择swiper-3.4.2完整压缩包下载,然后可以看它里面demos中的效果,你需要哪个效果,就用哪个!
使用方法(以其中demos中第21个效果为例):
1、引用JS和css文件
<link rel="stylesheet" href="path/to/swiper.min.css"><script src="path/to/swiper.min.js"></script>
2、在body中加入以下格式的HTML格式
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> <!-- 如果需要分页器 --> <div class="swiper-pagination"></div> <!-- 如果需要导航按钮 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- 如果需要滚动条 --> <div class="swiper-scrollbar"></div></div>导航等组件可以放在container之外
3、在script中加入以下js代码
<script> var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', paginationClickable: true, spaceBetween: 30, centeredSlides: true, autoplay: 2500, autoplayDisableOnInteraction: false }); </script>
4、在head中加入css样式
<style> html, body { position: relative; height: 100%; } body { background: #eee; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color:#000; margin: 0; padding: 0; } .swiper-container { width: 100%; height: 100%; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } </style>
至此就完成了一个简单的轮播,然后还有先script中要加的参数,我们可以在API文档中进行查阅,并添加。
注意的是:HTML中class的名字不能换,不要问为什么,就是那样用就OK了!
阅读全文
1 0
- swiper框架的使用教程
- swiper的使用教程
- swiper教程--swiper的基础使用(十九)
- swiper教程——swiper的基础使用(十九)
- swiper教程--swiper的基础使用(二十)
- 使用Swiper框架模仿Swiper中文官网的效果Demo
- 使用vue框架的时候出现和swiper冲突怎么办
- Swiper的使用心得
- swiper使用的经验
- 轮播图swiper的使用
- swiper的使用(一)
- swiper的基础使用(十五)
- swiper的使用(一)
- JS插件swiper的使用
- swiper的使用和轮播图
- bootstrap和swiper的使用
- Swiper使用
- swiper使用
- js有哪些内置对象
- 猴子补丁
- [2017百度之星程序设计大赛
- C语言网1074-数字整除
- 全面升级Android面试之事件分发机制
- swiper框架的使用教程
- 用户资源限制
- ubuntu16.04下使用anaconda安装tensorflow_gpu版本以及object detection的过程
- linux android studio
- suse 清除内核包
- 多态
- 我是如何让Eclipse的启动速度提升1.5秒的
- 并发基础_10_并发_容器_ConcurrentHashMap
- swiper学习