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 ...
随机推荐
- On-board diagnostics -- Standards documents
http://en.wikipedia.org/wiki/On-board_diagnostics#Standards_documents SAE standards documents on OBD ...
- How to get cocoapods work on Yosemite
查看原文:http://leancodingnow.com/how-to-get-cocoapods-work-on-yosemite/ 今天升级了Mac OS X 10.10-Yosemite以后运 ...
- discuz问题综合
1.discuz x2搬家问题:搬家后,需要修改数据库的配置文件,包含: 主要的配置文件有三个:config目录下的config_global.php和config_ucenter.php以 ...
- Codeforces Gym 100231G Voracious Steve 记忆化搜索
Voracious Steve 题目连接: http://codeforces.com/gym/100231/attachments Description 有两个人在玩一个游戏 有一个盆子里面有n个 ...
- C#利用GDI+绘制旋转文字等效果
C#中利用GDI+绘制旋转文本的文字,网上有很多资料,基本都使用矩阵旋转的方式实现.但基本都只提及按点旋转,若要实现在矩形范围内旋转文本,资料较少.经过琢磨,可以将矩形内旋转转化为按点旋转,不过需要经 ...
- oracle 迁移到 mysql(结构和数据)
1下载MySQL Migration Toolkit 2安装:jdk-6u38-ea-bin-b04-windows-amd64-31_oct_2012.exe 3下载ojdbc14.jar 具体地址 ...
- android复制数据库到SD卡（网上搜集，未经验证）
android中使用sqlite.复制assets下的数据库到SD卡.支持大于1M的文件 如果使用SD卡,需要在AndroidManifest.xml中设置权限 <uses-permission ...
- python time模块详解(转)
python 的内嵌time模板翻译及说明 一.简介 time模块提供各种操作时间的函数 说明:一般有两种表示时间的方式: 第一种是时间戳的方式(相对于1970.1.1 00:00 ...
- IOS编程之相机和相册
概述 IOS设备中的相机和相册,是我们在项目开发中经常会使用到的多媒体元素,使用相机可以获得最新想要的照片,而使用相册则可以访问IOS设备中的图片资源 使用IOS设备中的相机/相册获得图片资源 是否允 ...
- cocos2dx-jsb 跨语言调用及第三方集成 - 过程记录
1:C++中调用js方法: 问题:ios中当用户通过home键将游戏转入后台时,调用js中的暂停游戏方法: AppDelegate::applicationDidEnterBackground() 和 ...