对比之前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. myeclipse如何导入相应的jar包

    方法一: 相应的项目------>右键------->build path-------->Config BuildPath...------->Libraries------ ...

  2. hadoop备战：hadoop,hbase兼容版本号汇总

    Hbase的安装须要考虑Hadoop的版本号,即兼容性.有不足的希望能指出. 下面考究官网得到的,关于hadoop版本号和hbase版本号可到下面网址中下载:http://mirror.bit.edu ...

  3. Codeforces Round #309 (Div. 1) B. Kyoya and Permutation 构造

    B. Kyoya and Permutation Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/ ...

  4. 使用.net(C#)发送邮件学习手册（带成功案例）

    使用.net(C#)发送邮件学习手册(带成功案例) 1.了解发送邮件的三种方式 2.实例介绍使用client.DeliveryMethod = System.Net.Mail.SmtpDelivery ...

  5. 使用@media实现IE hack的方法

    文章简介:众所周知,有些时候为了实现IE下的某些效果与现代浏览器一致,我们不得不使用一些hack手段来实现目的.比如说使用“\0”,“\”和“\9”来仅让IE某些版本识别,而对于现代浏览器来说,他会直 ...

  6. 随机 I/O & 顺序 I/O

    在谈这俩概念前.先来说说 大I/O vs. 小I/O     通常.我们把 <=16KB 的I/O认为是小I/O.而 >=32KB 的I/O认为是大I/O     了解I/O的大小.影响到 ...

  7. C# 创建线程的简单方式：异步委托 .

    定义一个委托调用的方法:TakesAWhile //定义委托要引用的方法 private static int TakesAWhile(int data, int ms) { Console.Writ ...

  8. bing 输入法，切换简体、繁体快捷键与myeclipse 格式化代码冲突。。

    bing 输入法,切换简体.繁体快捷键与myeclipse 格式化代码冲突...蛋碎 myeclipse 代码格式化快捷键是:ctrl+shift+F,bing输入法简体.繁体切换也是,于是蛋疼的事情 ...

  9. android 布局之滑动探究 scrollTo 和 scrollBy 方法使用说明

    涉及到滑动,就涉及到VIEW,大家都知道,Android的UI界面都是由一个一个的View以及View的派生类组成,View作为基类,而常用的布局里面的各种布局就是它派生出来的ViewGroup的子类 ...

  10. ArcGis学习教程免费版在线观看

    ArcGis学习教程免费版在线观看 作者:池建    文章来源:清华大学出版社    点击数:150220    更新时间:2013-8-8 摘要:Arcgis学习视频教程根据书籍章节逐步讲解较为详细 ...