swiper的基础使用(五)
来源:互联网 发布:雅思词汇书推荐 知乎 编辑:程序博客网 时间:2024/04/28 21:44
本节讲解如何让swiper页面分组显示。
有时候一个屏幕当中只显示一个页面并不能满足我们的开发需求,在swiper当中就包装了一个屏幕显示一组页面的方法,只需要在swiper页面的初始化当中添加一条属性即可。
第一步我们依然是编写一个基础的swiper页面。
我们在页面当中添加了slide的间隙。
有时候一个屏幕当中只显示一个页面并不能满足我们的开发需求,在swiper当中就包装了一个屏幕显示一组页面的方法,只需要在swiper页面的初始化当中添加一条属性即可。
第一步我们依然是编写一个基础的swiper页面。
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">第一页</div> <div class="swiper-slide">第二页</div> <div class="swiper-slide">第三页</div> <div class="swiper-slide">第四页</div> <div class="swiper-slide">第五页</div> <div class="swiper-slide">第六页</div> <div class="swiper-slide">第七页</div> <div class="swiper-slide">第八页</div> <div class="swiper-slide">第九页</div> <div class="swiper-slide">第十页</div> </div> </div>然后在js当中进行页面的初始化并且添加属性,为了观看效果更佳。
我们在页面当中添加了slide的间隙。
<script> var swiper = new Swiper('.swiper-container',{ slidesPerView:3, //页面分组显示,这里显示为3组 spaceBetween:30 //slide间隙 }); </script>当然不要忘记引用我们的框架文件,这样运行我们的页面就会发现我们的页面在当前屏幕当中会显示一组。
0 0
- swiper的基础使用(五)
- swiper的基础使用(五)
- swiper的基础使用(五)
- swiper教程--swiper的基础使用(十九)
- swiper教程——swiper的基础使用(十九)
- swiper教程--swiper的基础使用(二十)
- swiper的基础使用(二)
- swiper的基础使用(三)
- swiper的基础使用(四)
- swiper的基础使用(一)
- swiper的基础使用(二)
- swiper的基础使用(三)
- swiper的基础使用(四)
- swiper的基础使用(六)
- swiper的基础使用(七)
- swiper的基础使用(八)
- swiper的基础使用(九)
- swiper的基础使用(十)
- Android事件分发总结(无源码分析)
- HTTP权威指南-第三章-HTTP报文自己理解
- 如何获取已加载在ImageView中的图片ID
- J2SE--基础语法一
- static struct option opts[] =
- swiper的基础使用(五)
- linux---deepin下 git的使用
- LeetCode - 106. Construct Binary Tree from Inorder and Postorder Traversal
- windows 10 bash change PS1
- Android--启动另一个Activity
- swiper的基础使用(六)
- 回溯法
- swiper的基础使用(七)
- Irrlicht学习笔记(6)--2DGraphics