对比之前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. iOS中CollectionView由于多次点击造成错误的解决方案

    iOS中CollectionCiew由于多次点击,会给程序造成错误. 这个时候,我们可以用过手势类来进行判断和过滤. 但是,有一个快捷的解决方法,那就是给用户响应增加延时操作. 具体代码如下: [co ...

  2. c#winform使用WebBrowser 大全[超长文转载]

    1.主要用途:使用户可以在窗体中导航网页. 2.注意:WebBrowser 控件会占用大量资源.使用完该控件后一定要调用 Dispose 方法,以便确保及时释放所有资源.必须在附加事件的同一线程上调用 ...

  3. Java IO之File

    FILE类是用来实现获取文件.文件夹的类库工具,File并不是像类名所表示的那样仅仅是用来表示文件.它还能够用来表示文件夹. 所以能够用File来获取一个文件夹下的全部文件,甚至是文件夹中的文件. 一 ...

  4. 终端I/O之规范模式

    规范模式很简单:发一个读请求,输入完一行后,终端驱动程序即刻返回.下列几个条件都会造成读返回: 所要求的字节数已经读到时,读返回.无需读一个完整的行.如果都了部分行,也不会丢失任何信息,下一次读从前一 ...

  5. sqlserver 行转列 语文,数学,物理,化学

    数据库查询行转列 1.原数据库值 stdname stdsubject result 张三 语文 张三 数学 张三 物理 李四 语文 李四 数学 李四 物理 李四 化学 李四 化学 2.要得到如下表 ...

  6. centos复制到另外一台电脑连不上网

    http://snow-berry.iteye.com/blog/1991754 从一台电脑virtual box克隆出来的centos.vdi复制到另外一台电脑,找不到网卡,提示Device eth ...

  7. LeetCode28 Implement strStr()

    题目: Implement strStr(). Returns the index of the first occurrence of needle in haystack, or -1 if ne ...

  8. storm 分组

    Stream Groupings: Stream Grouping定义了一个流在Bolt任务间该如何被切分.这里有Storm提供的6个Stream Grouping类型: 1. 随机分组(Shuffl ...

  9. 修改Intellij Idea 创建maven项目默认Java编译版本

    在使用Intellij Idea 创建Maven项目时,默认的Java Language是1.5,虽然可以在Project Structrue中修改,但是每次pom.xml文件有变化时,工程又会重置到 ...

  10. ImageSource使用心得(转)

    很多时候,我们会使用图片来装饰UI,比如作为控件背景等. 而这些图片可以分为两种形式,即存在于本地文件系统中的图片和存在于内存中的图片 对于这两种形式的图片,在WPF中,使用方法不同,下面主要说明针对 ...