swiper的基础使用(十四)
来源:互联网 发布:java自定义泛型类 编辑:程序博客网 时间:2024/04/28 19:38
这次内容我们介绍如何在swiper页面当中开启循环模式。
首先让我们用积累了十四节……不十三节的功力来搭建一个基本的swiper的布局。并且根据需要来设置CSS样式。
首先让我们用积累了十四节……不十三节的功力来搭建一个基本的swiper的布局。并且根据需要来设置CSS样式。
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">H5EDU 1<img src="logo.png"></div> <div class="swiper-slide">H5EDU 2<img src="logo.png"></div> <div class="swiper-slide">H5EDU 3<img src="logo.png"></div> <div class="swiper-slide">H5EDU 4<img src="logo.png"></div> <div class="swiper-slide">H5EDU 5<img src="logo.png"></div> <div class="swiper-slide">H5EDU 6<img src="logo.png"></div> </div> <div class="swiper-pagination"></div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div>然后到js当中进行页面的初始化,再加上我们的循环属性(loop:true).
var swiper = new Swiper('.swiper-container',{ pagination:'.swiper-pagination', paginationClickable:true, nextButton:'.swiper-button-next', prevButton:'.swiper-button-prev', slidesPerView:1, spaceBetween:30, loop:true //开启循环属性 });完成之后我们就可以一直进行翻页了,能玩三天三夜,还不会累!
0 0
- swiper的基础使用(十四)
- swiper的基础使用(十四)
- swiper的基础使用(十四)
- swiper教程--swiper的基础使用(十九)
- swiper教程——swiper的基础使用(十九)
- swiper教程--swiper的基础使用(二十)
- swiper的基础使用(二)
- swiper的基础使用(三)
- swiper的基础使用(四)
- swiper的基础使用(一)
- swiper的基础使用(二)
- swiper的基础使用(三)
- swiper的基础使用(四)
- swiper的基础使用(五)
- swiper的基础使用(六)
- swiper的基础使用(七)
- swiper的基础使用(八)
- swiper的基础使用(九)
- TOJ 1765. Longest Ordered Subsequence
- TP3.2.3 导出Excel
- TortoiseSVN 合并操作简明教程
- 滑动窗口的最大值
- HDU 1372 Knight Moves 【经典BFS】
- swiper的基础使用(十四)
- div css图片列表实例
- 神圣罗马帝国皇帝
- UIPopoverController
- 【矩阵乘法】[NOI2013]向量内积
- RecycleView 仿支付宝实现item拖动效果
- Irrlicht学习笔记(7.2)--Collision
- MySQL 触发器简单实例
- 类集框架List