轮播swiper配置选项
本文主要介绍了swiper配置选项，包含了轮播的无限滚动、懒加载、监听当前位置、上下翻页、过渡动画渐变、延时加载图片、自动轮播等；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> <!-- Link Swiper's CSS -->
<link rel="stylesheet" href="public/css/swiper.min.css"> <!-- Demo styles -->
<style>
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
/*控制swiper组件的高度height*/
/*height: 450px;*/
max-height: 60vh; }
.swiper-slide {
/* Center slide text vertically */
/*弹性盒子flex的应用*/
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;
}
/*swiper容器内图片*/
.swiper-slide img{
width: 100%;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<!--data-src懒加载-->
<img data-src="public/img/timg0.jpg" class="swiper-lazy">
<div class="swiper-lazy-preloader"></div>
</div>
<div class="swiper-slide">
<!--data-src懒加载-->
<img data-src="public/img/timg1.jpg" class="swiper-lazy">
<div class="swiper-lazy-preloader"></div>
</div>
<div class="swiper-slide">
<!--data-src懒加载-->
<img data-src="public/img/timg2.jpg" class="swiper-lazy">
<div class="swiper-lazy-preloader"></div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<!--jQ-->
<script src="public/js/jquery-2.1.4.min.js"></script>
<!-- Swiper JS -->
<script src="public/js/swiper.jquery.min.js"></script>
<!-- Initialize 初始化 Swiper -->
<script>
$(document).ready(function () {
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',//可选选项，是否显示分页器
paginationClickable: true,//可选选项，是否点击分页器滑动
lazyLoading : true,//是否懒加载
lazyLoadingInPrevNext : true,//可选选项，设置为true允许将延迟加载应用到最接近的slide的图片
autoplay: 3000,//可选选项，自动滑动的时间,1000为1秒
speed:2000,//可选选项，翻一页切换的速率
initialSlide :1,//可选选项，初始的页面，默认0
//direction : 'vertical',//可选选项，滚动的方向，默认水平
//parallax : true,//可选选项，视距差
//nextButton: '.swiper-button-next',//下一页
//prevButton: '.swiper-button-prev',//上一页
//width : window.innerWidth,//可选选项，全屏
effect : 'fade',//可选选项，渐变动画
//onSlideChangeStart: function(swiper){
//alert(swiper.activeIndex);
//},//获取当前的序号开始时触发函数，改为onSlideChangeEnd是切换成功后触发
loop: 1,//是否无限滚动 //点击事件
//onTap: function(swiper){
// alert('你tap了Swiper');
//},//在移动端，click会有 200~300 ms延迟，所以请用tap代替click作为点击事件 }); //自定义上一页、下一页
$('#btn1').click(function(){
swiper.slidePrev();
});
$('#btn2').click(function(){
swiper.slideNext();
});
})
</script>
</body>
</html>
轮播swiper配置选项的更多相关文章
- swiper轮播 swiper整屏轮播
近期坐了几个移动端 整屏轮播的 效果 之前都是自己一个个写,之前听说过swiper插件,没有使用过,今天一尝试,果然,爽 使用方法示例 <div class="swiper-cont ...
- 轮播——swiper
swiper组件 1.轮播数据是使用ajax进行填充的话,可能数目是0~n,在数目是1时,轮播会出现一些问题(出现空白侧),这时需作出判断(一张图片不滑动,多张就就行滑动),方法如下(以下方法中,si ...
- iOS开发——图片轮播图+单选选项
由于公司开发需要,需要滚动每道评测题, 并且一道评测题单项选择,按钮和文字都可点击选中 (单选比多选复杂一点,但是原理差不多) 1.当初任务紧,代码也没有优化,仅供思路参考,先放几张图 2.代码部分 ...
- reactjs-swiper react轮播图组件基于swiper
react轮播图组件基于swiper demo地址:http://reactjs-ui.github.io/reactjs-swiper/simple.html 1. 下载安装 npm install ...
- 微信小程序之 Swiper（轮播图）
1.逻辑层 mine.js // pages/mine/mine.js Page({ /** * 页面的初始数据 */ data: { /*轮播图 配置*/ imgUrls: [ 'http://im ...
- asp.net Swiper 轮播动画
原文:https://blog.csdn.net/qq_39656138/article/details/90451289 官网:https://www.swiper.com.cn/api/index ...
- Android 轮播图Banner切换图片的效果
Android XBanner使用详解 2018年03月14日 08:19:59 AND_Devil 阅读数:910 版权声明:本文为博主原创文章,未经博主允许不得转载. https://www. ...
- 原生JavaScript（js）手把手教你写轮播图插件（banner）
---恢复内容开始--- 1.轮播图插件 1.什么是插件: 为已有的程序增加功能 2.插件的特点(为什么要做成一个插件)与注意事项: 1.通用性,可移植性强 2.兼容性:不会对其他代码产生影响 3.创 ...
- swiper轮播问题之一：轮播图内容为动态数据生成时轮播图无法自动轮播
本人在用H5做移动端项目中使用Swiper遇到的两个问题,因此加深了对Swiper的掌握,分享出来对刚开始接触Swiper的童鞋们或多或少会有帮助. 首先,new Swiper的初始化最 ...
随机推荐
- 控制结构(5): 必经之地（using）
// 上一篇:局部化(localization) // 下一篇:最近最少使用(LRU) 基于语言提供的基本控制结构,更好地组织和表达程序,需要良好的控制结构. 前情回顾 上一周,我们谈到了分支/卫语句 ...
- mybatis mapper映射文件全解
目录 select.update.delete.insert 设置参数类型以及取值 基本数据类型 对象数据类型 map数据类型 #{ } 和 ${ } 的区别 ResultMap Auto-map ...
- jvm学习一：类加载过程详解
(自学笔记,持续更新,欢迎指正) 我们都知道一个java程序运行要经过编译和执行,但是这太概括了,中间还有很多步骤,今天来说说类加载 学完类加载之后,java运行过程就可以分为 编译 > 类 ...
- 对Datatable中过长内容实行省略话
, 16) + '...</a>' } // 点击跳转的实现 else { return '<a id="taskFocus" href="/task_ ...
- [SimplePlayer] 6. 音频同步
音频的同步并不需要我们在程序实现.在设置好声道.采样率.音频格式后,程序只需要保证能一直提供音频数据就行,其余工作基本都由声卡实现.
- pymysql模块
一.pymysql模块 1.说明: 想在python代码中连接上mysql数据库,就需要使用pymysql模块, pymysql是在 Python3.x 版本中用于连接 MySQL 服务器的一个库,在 ...
- [SCOI2009] 迷路
题目类型:拆点, 矩阵快速幂 转化为矩阵快速幂,好题! 传送门:>Here< 题意:给出邻接矩阵,求\(1\)到\(N\)恰好长度为\(T\)的路径方案数 解题思路 如果题目给出的是一个\ ...
- FileSaver.js 文件下载
安装: npm install file-saver --save 或者(需下载FileSaver.js文件) <script src="path/FileSaver.js" ...
- CF226D The table
题目链接 题意 给出一个\(n\times m\)的矩阵,可以把某些行和某些列上面的数字变为相反数.问修改那些行和哪些列可以使得所有行和所有列之和都为非负数. 思路 每次将负数的行或者列变为相反数.因 ...
- JS兼容问题
//1.滚动条到顶端的距离 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //2.滚动条 ...