对比之前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的更多相关文章

  1. Swiper之滑块4

    最炫3D走一波: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" ...

  2. Swiper之滑块3

    上章Swiper滑块2.Swiper滑块1都是手动的,这章我们来自动的! 其实只是加了Swiper的speed(滑动速度即slider自动滑动开始到结束的时间)属性而已(∩_∩),单位是ms < ...

  3. 【swiper】 滑块组件说明

    swiper 滑块视图容器,其原型如下: <swiper indicator-dots="[Boolean]" indicator-color="[Color]&q ...

  4. Swiper之滑块1

    之前介绍过Swiper,它是一个神奇的插件.类似于Android的触屏操作,Swiper应用于Web中也可以实现这样的效果,我们来看看(用鼠标可拖动). startSlide Integer (def ...

  5. 小程序开发基础-swiper 滑块视图容器

    小编 / 达叔小生 参考官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/ 小程序开发基础-swiper 滑块视图容器 根 ...

  6. 用原生js来写一个swiper滑块插件

        是不是有点印象了,没错,他的最基本的用法就是左右滑动,插件使用者只需要写几行简单的html和js即可实现一个简单滑动效果,不过你完全可以组合各种元素来适应不同的场景. 当然插件我已经写好了,咱 ...

  7. 微信小程序swiper 前后边距的使用

    小程序中有一个组件swiper 就是滑块视图容器 其中提供了两个属性 previous-margin:前边距,可用于露出前一项的一小部分       next-margin:后边距,可用于露出后一项的 ...

  8. 微信小程序之视图容器（swiper）组件创建轮播图

    一.视图容器(Swiper) 1.swiper:滑块视图容器 微信官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/swi ...

  9. 微信小程序初体验(上)

    版权声明:本文由练小习原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/204 来源:腾云阁 https://www.qclo ...

随机推荐

  1. flash builder 4.6使用profile（概要分析）调试性能

    最近用调试flex的性能,发现fb自带有性能调试工具profile,折腾好一段时间终于成功用上 环境:flash builder 4.6,myeclipse 10(fb装独立版,再以插件形式绑定到my ...

  2. 六、Linux/UNIX操作命令积累【kill、netstat、df、du】

    在使用Linux/UNIX下,常常会使用文本界面去设置系统或操作系统,作者本人在工作的过程也在不断接触这方面的命令,所以为此特酝酿.准备.開始了本文的编写. 本文主要记录自己平时遇到的一些Linux/ ...

  3. 广州项目实施步骤II_练习配置HaProxy的重定向负载均衡

    CentOS6.4 配置Haproxy   Haproxy下载地址:http://pan.baidu.com/share/link?shareid=1787182295&uk=18290183 ...

  4. 内网能PING通TELNET通不能访问解决

    遇到一个离奇故障,内网,两个主机在同一IP段内,能互相PING通,TELNET对方的WEB服务器端口,通. 但用IE访问时不能,显示HTTP400.这明显是客户端系统的问题啊!但如何解决呢?我强烈怀疑 ...

  5. Codeforces Round #339 (Div. 1) A. Peter and Snow Blower 计算几何

    A. Peter and Snow Blower 题目连接: http://www.codeforces.com/contest/613/problem/A Description Peter got ...

  6. 【剑指offer】递归循环两种方式反转链表

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/25737023 本文分别用非递归和递归两种方式实现了链表的反转,在九度OJ上AC. 题目描写 ...

  7. Apache DbUtils - JDBC轻量级封装的工具包

    前段时间使用了Apache Common DbUtils这个工具,在此留个印,以备不时查看.大家都知道现在市面上的数据库访问层的框架很多,当然很多都是包含了OR-Mapping工作步骤的例如大家常用的 ...

  8. 虚拟机VMware 9安装苹果MAC OSX 10.8图文教程

    前些天虚拟机VMware Workstation 9出来,相信大家都已经熟悉VM9了,至于MAC OSX 10.8系统,那也是出来一段时间了,本篇文章就是来讲解VMware Workstation 9 ...

  9. C++检测一个文件是否存在

    ifstream::is_open - C++ Reference http://www.cplusplus.com/reference/fstream/ifstream/is_open/ // if ...

  10. 过滤文本文档中的数据并插入Cassandra数据库

    代码如下: package com.locationdataprocess; import java.io.BufferedReader; import java.io.File; import ja ...