swiper的基础使用(十)
2016-06-21 14:33
399 查看
本文为H5EDU机构官方的HTML5培训教程 swiper教程 这节课我们介绍swiper页面的多行显示。
这节课我们介绍swiper当中的swiper嵌套。
这次第一步有些不一样,虽然同样是要搭建swiper页面,但是我们在一个swiper页面当中的slide里面嵌套了一个swiper在里面。
我们可以看到,这次在swiper的外部容器当中添加了一个类名,swiper-container-h,这个类名其实我们可以随便取一个,作为一个标记,记录我们这个外部容器为哪一个swiper页面的外部容器,我们在初始化的时候是要绑定它的,然后有几个swiper的页面我们就要初始化几次,并且每一个初始化都要绑定到不同的swiper页面的外部容器上面,不然的话我们的页面样式就会错乱,下面进行初始化。
这里因为有俩个swiper页面所以分别初始化了俩次,然后要分别设定每个swiper页面的CSS样式,以及每一个swiper页面当中的属性。注意,绑定的外部容器类名一定部能相同,不然一个页面初始化俩次会造成样式错乱。
这节课我们介绍swiper当中的swiper嵌套。
这次第一步有些不一样,虽然同样是要搭建swiper页面,但是我们在一个swiper页面当中的slide里面嵌套了一个swiper在里面。
<div class="swiper-container swiper-container-h"> <div class="swiper-wrapper"> <div class="swiper-slide">Horizontal Slide 1</div> <div class="swiper-slide"> <div class="swiper-container swiper-container-v"> <div class="swiper-wrapper"> <div class="swiper-slide">Vertical Slide 1</div> <div class="swiper-slide">Vertical Slide 2</div> <div class="swiper-slide">Vertical Slide 3</div> <div class="swiper-slide">Vertical Slide 4</div> <div class="swiper-slide">Vertical Slide 5</div> </div> <div class="swiper-pagination swiper-pagination-v"></div> </div> </div> <div class="swiper-slide">Horizontal Slide 3</div> <div class="swiper-slide">Horizontal Slide 4</div> </div> <!-- Add Pagination --> <div class="swiper-pagination swiper-pagination-h"></div> </div>
我们可以看到,这次在swiper的外部容器当中添加了一个类名,swiper-container-h,这个类名其实我们可以随便取一个,作为一个标记,记录我们这个外部容器为哪一个swiper页面的外部容器,我们在初始化的时候是要绑定它的,然后有几个swiper的页面我们就要初始化几次,并且每一个初始化都要绑定到不同的swiper页面的外部容器上面,不然的话我们的页面样式就会错乱,下面进行初始化。
var swiperH = new Swiper('.swiper-container-h', { pagination: '.swiper-pagination-h', paginationClickable: true, spaceBetween: 50 }); var swiperV = new Swiper('.swiper-container-v', { pagination: '.swiper-pagination-v', paginationClickable: true, direction: 'vertical', spaceBetween: 50 });
这里因为有俩个swiper页面所以分别初始化了俩次,然后要分别设定每个swiper页面的CSS样式,以及每一个swiper页面当中的属性。注意,绑定的外部容器类名一定部能相同,不然一个页面初始化俩次会造成样式错乱。
相关文章推荐
- easyui------显示隐藏列功能
- 在 Linux 中如何移动文件
- HTML5中在客户端验证文件上传的大小
- html5 web数据存储
- 页面元素查找之Selectors API
- 使用ajax实现用户登录验证(升级版)
- Canvas 在高清屏下绘制图片变模糊的解决方法
- 关于前端的思考与感悟
- 新时代编辑神器:Atom
- rem : web app适配的秘密武器
- jquery高级应用之Deferred对象
- 又被事件冒泡坑了一把,这次要彻底弄懂浏览器的事件流
- 插件管理框架 for Delphi(一)
- PowerShell移动目录中指定文件的方法(非全部文件)
- 鼠标触发移动的分层菜单 层菜单moveMenu
- 使用CSS框架布局的缺点和优点小结
- 原生js结合html5制作小飞龙的简易跳球
- 一起动手编写Android图片加载框架