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

startSlide Integer (default:0) - 开始滚动的位置

speed Integer (default:300) - 动画滚动的间隔（秒数）

auto Integer - 开始自动幻灯片（以毫秒为单位幻灯片之间的时间）

continuous Boolean (default:true) - 创建一个无限的循环（当滑动到所有动画结束时是否循环滑动）

disableScroll Boolean (default:false) - 当滚动滚动条时是否停止幻灯片滚动

stopPropagation Boolean (default:false) - 是否停止事件冒泡

callback Function - 幻灯片运行中的回调函数

transitionEnd Function - 动画运行结束的回调函数

首先，我们初始化Swiper，返回初始化后的Swiper实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title> new document </title>
<link rel="stylesheet" href="http://files.cnblogs.com/files/caidupingblogs/swiper.min.css">
<meta name="generator" content="editplus" charset="utf-8"/>
<style>

body {
background: #eee;
/*字体粗细*/
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 500px;
height: 300px;
margin: 20px auto;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/*父容器*/
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/*左右居中*/
/*Webkit高效稳定兼容性好，结构清晰易于维护*/
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

}
</style>
</head>

<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
</div>
<script src="http://files.cnblogs.com/files/caidupingblogs/swiper.min.js"></script>

<!-- 初始化 Swiper -->
<script>
var swiper = new Swiper('.swiper-container');
</script>
</body>

//

Swiper之滑块1的更多相关文章

  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之滑块2

    对比之前Swiper滑块1来说,我们添加一下背景颜色来看看: <!DOCTYPE html> <html> <head> <meta http-equiv=& ...

  4. 【swiper】 滑块组件说明

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

  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. Codeforces Round #260 (Div. 1) D. Serega and Fun 分块

    D. Serega and Fun Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/455/pro ...

  2. phpexcel来做表格导出（多个工作sheet）

    1.先得去下载phpexcel文档,加压下来 <?php /** * 简单实用Execl */ set_include_path('.'.get_include_path().PATH_SEPA ...

  3. 基于HTML5实现的中国象棋游戏

    棋类游戏在桌面游戏中已经非常成熟,中国象棋的版本也非常多.今天这款基于HTML5技术的中国象棋游戏非常有特色,我们不仅可以选择中国象棋的游戏难度,而且可以切换棋盘的样式.程序写累了,喝上一杯咖啡,和电 ...

  4. 纯css3实现的动画加载特效

    之前给大家带了很多款进度加载条,今天再给大家分享一款纯css3实现的动画加载特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="wrap& ...

  5. win7系统中的声音图标不见了怎么办

    转载:http://jingyan.baidu.com/article/dca1fa6f815023f1a44052d6.html 我以前用的比较多的还是xp系统,对xp系统中的一些常见的操作还是很方 ...

  6. LINUX ping 指定网卡

    计算机上有多块网卡(例如笔记本电脑的无线网卡和以太网卡)连接至网络,使用ping命令想指定使用哪块网卡怎么办? ping -I eth0 10.10.10.1ping -I eth1 10.10.10 ...

  7. java 删除字符串中的反斜杠\

    Java中有时候会打印出来会含有反斜杠(\)的字符串,我们需要删除时,可以使用 replace() 或 replaceAll() 但是要注意的是replaceAll()里面用的是正则表达式,所以一个斜 ...

  8. 使用post方式提交数据

    post提交代码 public class MainActivity extends Activity { @Override protected void onCreate(Bundle saved ...

  9. [ASP.NET] Http协议GET与POST

    引言 HTTP 协议我想任何IT人士都耳熟能详了,大家都能说出个所以然来.但是如果我问你HTTP协议的请求方法有哪些?POST与GET的差异?GET或POST传送数据量的大小有限制吗?HTTP响应的状 ...

  10. Android小项目之五 splash动画效果

    ------- 源自梦想.永远是你IT事业的好友.只是勇敢地说出我学到! ---------- 按惯例,写在前面的:可能在学习Android的过程中,大家会和我一样,学习过大量的基础知识,很多的知识点 ...