Swiper实现轮播图效果


Posted in Javascript onJuly 03, 2017

本文实例为大家分享了Swiper实现轮播图效果的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en"> 
<head>

<meta charset="utf-8"> 
<title>Swiper demo</title> 
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="../dist/css/swiper.min.css" rel="external nofollow" > 
<!-- Demo styles -->

 
<style>
html, body {
position: relative;
height: 100%;

}

body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
 
}
.swiper-container {
 
width: 100%;
height: 100%;


 
}

.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-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>


 
<!-- Swiper -->
 
<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>

<!-- Add Pagination -->


 
<div class="swiper-pagination"></div>
 
</div>

 
<!-- Swiper JS -->
<script src="../dist/js/swiper.min.js"></script>
<!-- Initialize Swiper -->
 
<script>
var swiper = new Swiper('.swiper-container', {
//小白点
 
pagination: '.swiper-pagination',
 
paginationClickable: true
 
});
</script>
 
</body>
 
</html>

最后 别忘了再打这些东西之前要引Swiper.css和Swiper.js插件哦!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 笔记二 Array和Date对象方法
May 22 Javascript
自己整理的一个javascript日期处理函数
Oct 16 Javascript
JavaScript中为元素加上name属性的方法
May 09 Javascript
在网站上应该用的30个jQuery插件整理
Nov 03 Javascript
js异步加载的三种解决方案
Mar 04 Javascript
借助javascript代码判断网页是静态还是伪静态
May 05 Javascript
JavaScript数组随机排列实现随机洗牌功能
Mar 19 Javascript
jQuery实现日期联动效果实例
Jul 26 Javascript
vue环境搭建简单教程
Nov 07 Javascript
Vue slot用法(小结)
Oct 22 Javascript
原生js实现移动端Touch轮播图的方法步骤
Jan 03 Javascript
vue element-ui实现动态面包屑导航
Dec 23 Javascript
jQuery实现点击关注和取消功能
Jul 03 #jQuery
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
Jul 03 #Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
Jan 27 #Javascript
Bootstrap按钮组实例详解
Jul 03 #Javascript
详解使用vue实现tab 切换操作
Jul 03 #Javascript
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 #jQuery
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
Jul 02 #Javascript
You might like
附件名前加网站名
2008/03/23 PHP
一个很不错的PHP翻页类
2009/06/01 PHP
php park、unpark、ord 函数使用方法(二进制流接口应用实例)
2010/10/19 PHP
php array_push()数组函数:将一个或多个单元压入数组的末尾(入栈)
2011/07/12 PHP
php的mkdir()函数创建文件夹比较安全的权限设置方法
2014/07/28 PHP
9个比较实用的php代码片段
2016/03/15 PHP
PHP调用接口API封装的例子
2019/10/11 PHP
Yii框架Session与Cookie使用方法示例
2019/10/14 PHP
ThinkPHP6.0如何利用自定义验证规则规范的实现登陆
2020/12/16 PHP
Add Formatted Data to a Spreadsheet
2007/06/12 Javascript
JavaScript 模拟用户单击事件
2009/12/31 Javascript
jQuery 表单验证扩展(四)
2010/10/20 Javascript
js Function类型
2011/12/04 Javascript
javascript自定义函数参数传递为字符串格式
2014/07/29 Javascript
JavaScript中的数值范围介绍
2014/12/29 Javascript
jQuery表格的维护和删除操作
2017/02/03 Javascript
Windows下Node.js安装及环境配置方法
2017/09/18 Javascript
Node.js文件编码格式的转换的方法
2018/04/27 Javascript
手把手带你封装一个vue component第三方库
2019/02/14 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
2019/09/20 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
2020/11/05 Javascript
Python+Turtle动态绘制一棵树实例分享
2018/01/16 Python
python 在指定范围内随机生成不重复的n个数实例
2019/01/28 Python
python Pandas如何对数据集随机抽样
2019/07/29 Python
安装docker-compose的两种最简方法
2019/07/30 Python
python 字典有序并写入json文件过程解析
2019/09/30 Python
python 五子棋如何获得鼠标点击坐标
2019/11/04 Python
使用 PyTorch 实现 MLP 并在 MNIST 数据集上验证方式
2020/01/08 Python
scrapy数据存储在mysql数据库的两种方式(同步和异步)
2020/02/18 Python
python小程序之4名牌手洗牌发牌问题解析
2020/05/15 Python
python中if嵌套命令实例讲解
2021/02/25 Python
如何理解委托
2012/01/06 面试题
解释下面关于J2EE的名词
2013/11/15 面试题
应届生财务管理求职信
2013/11/06 职场文书
工程技术员岗位职责
2014/03/02 职场文书
2016社区平安家庭事迹材料
2016/02/26 职场文书