Swiper之滑块2
对比之前Swiper滑块1来说，我们添加一下背景颜色来看看：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Swiper之滑块2</title>
<link rel="stylesheet" href="http://files.cnblogs.com/files/caidupingblogs/swiper2.min.css">
<style>
* {
margin: 0;
padding: 0;
}
.blue-slide {
background: #4390EE;
}
.red-slide {
background: #CA4040;
}
.orange-slide {
background: #FF8604;
}
.swiper-slide {
line-height: 300px;
color: #fff;
font-size: 36px;
text-align: center;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide blue-slide">第一页</div>
<div class="swiper-slide red-slide">第二页</div>
<div class="swiper-slide orange-slide">第三页</div>
</div>
</div>
<script src="http://files.cnblogs.com/files/caidupingblogs/swiper.min.js"></script>
<script type="text/javascript">
var mySwiper = new Swiper('.swiper-container',{
loop: true,
autoplay: 3000,
});
</script>
</body>
</html>
//
Swiper之滑块2的更多相关文章
- Swiper之滑块4
最炫3D走一波: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" ...
- Swiper之滑块3
上章Swiper滑块2.Swiper滑块1都是手动的,这章我们来自动的! 其实只是加了Swiper的speed(滑动速度即slider自动滑动开始到结束的时间)属性而已(∩_∩),单位是ms < ...
- 【swiper】 滑块组件说明
swiper 滑块视图容器,其原型如下: <swiper indicator-dots="[Boolean]" indicator-color="[Color]&q ...
- Swiper之滑块1
之前介绍过Swiper,它是一个神奇的插件.类似于Android的触屏操作,Swiper应用于Web中也可以实现这样的效果,我们来看看(用鼠标可拖动). startSlide Integer (def ...
- 小程序开发基础-swiper 滑块视图容器
小编 / 达叔小生 参考官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/ 小程序开发基础-swiper 滑块视图容器 根 ...
- 用原生js来写一个swiper滑块插件
是不是有点印象了,没错,他的最基本的用法就是左右滑动,插件使用者只需要写几行简单的html和js即可实现一个简单滑动效果,不过你完全可以组合各种元素来适应不同的场景. 当然插件我已经写好了,咱 ...
- 微信小程序swiper 前后边距的使用
小程序中有一个组件swiper 就是滑块视图容器 其中提供了两个属性 previous-margin:前边距,可用于露出前一项的一小部分 next-margin:后边距,可用于露出后一项的 ...
- 微信小程序之视图容器（swiper）组件创建轮播图
一.视图容器(Swiper) 1.swiper:滑块视图容器 微信官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/swi ...
- 微信小程序初体验(上)
版权声明:本文由练小习原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/204 来源:腾云阁 https://www.qclo ...
随机推荐
- 获取 CPU 序列号
function GetCpuID: string; var _eax, _ebx, _ecx, _edx: Longword; s, s1, s2: string; begin asm push e ...
- BZOJ 3930: [CQOI2015]选数 递推
3930: [CQOI2015]选数 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeOnline/pro ...
- 使用Url.Routeurl获取url值。
1,获取url值. public ActionResult About() { RouteValueDictionary RVD = new Ro ...
- 构建移动Web应用程序的技术堆栈
编写web应用程序时,有很多的技术决策.笔者最近回来编写现代Web应用程序,并希望总结一些曾经在开发周期过程中做了记录零散的想法.这篇文章是关于一套对笔者最近开发的项目有帮助的框架.笔者重温了一些最重 ...
- php或js判断网站访问者来自手机或者pc机
php或js判断网站访问者来自手机或者pc机 2013年9月26日,在弄wtuonline的时候为了区分用户是来自手机版浏览器还是pc,针对不同平台选择不同的网站版本,最终总结如下: ...
- 如何在 iOS 8 中使用 Swift 实现本地通知(上)
当你的应用在后台运行时,可以简单地使用本地通知把信息呈现给用户.它可以允许你显示 提醒.播放提示音和数字角标(badge).本地通知可以被以下的事件触发:计划好的时间点或者用户进入和离开某个地理区域. ...
- jqgrid 获取当前页码
jqgrid 获取当前页码 $('#gridTable').getGridParam('page'); /** *刷新,jqGrid刷新当前列表页代码 */ function refresh(url) ...
- IIS6_IIS7日志文件位置
准备统计下页面访问量 查找IIS日志,发现在以前IIS6日志的位置,竟然木有找到日志... 查看下IIS设置,发现IIS7和6的默认日志位置不一样额... IIS 6 Log files locati ...
- 自己编写的.sh脚本文件运行完闪退解决方案
gnome-terminal设置如下图: 直接原因是,“命令退出时:退出终端”造成的!! 解决方案如下: 1. Ctrl + Alt + F1 ,进入文本操作模式: 2. 登录后,执行:yum ins ...
- 动漫网站基于jquery的横向手风琴特效
今天给大家分享一款动漫网站基于jquery的横向手风琴特效.这款手风琴特效适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预 ...