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 相关文章推荐
js一组验证函数
Dec 20 Javascript
checkbox 复选框不能为空
Jul 11 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
Sep 02 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
Dec 17 Javascript
AngularJS入门教程之ng-checked 指令详解
Aug 01 Javascript
JS出现失效的情况总结
Jan 20 Javascript
用js制作淘宝放大镜效果
Oct 28 Javascript
vue cli2.0单页面title修改方法
Jun 07 Javascript
小程序日历控件使用方法详解
Dec 29 Javascript
微信小程序实现横向滚动导航栏效果
Dec 12 Javascript
js实现坦克大战游戏
Feb 24 Javascript
JavaScript实现点击切换功能
Jan 27 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
PHP 高级课程笔记 面向对象
2009/06/21 PHP
php自动给文章加关键词链接的函数代码
2012/11/29 PHP
linux下使用crontab实现定时PHP计划任务失败的原因分析
2014/07/05 PHP
ThinkPHP单字母函数(快捷方法)使用总结
2014/07/23 PHP
php7安装yar扩展的方法详解
2017/08/03 PHP
利用 fsockopen() 函数开放端口扫描器的实例
2017/08/19 PHP
PHP实现数据库统计时间戳按天分组输出数据的方法
2017/10/10 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
用jquery来定位
2007/02/20 Javascript
向当前style sheet中插入一个新的style实现方法
2013/04/01 Javascript
IE6已终止操作问题的2种情况及解决
2014/04/23 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
JavaScript学习笔记之ES6数组方法
2016/03/25 Javascript
jquery中live()方法和bind()方法区别分析
2016/06/23 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
2016/11/09 Javascript
详解Node.js:events事件模块
2016/11/24 Javascript
js封装tab标签页实例分享
2016/12/19 Javascript
详解angularJs指令的3种绑定策略
2017/04/13 Javascript
node.js中使用Export和Import的方法
2017/09/18 Javascript
vue-element-admin 菜单标签失效的解决方式
2019/11/12 Javascript
python使用marshal模块序列化实例
2014/09/25 Python
Python的gevent框架的入门教程
2015/04/29 Python
Python开发如何在ubuntu 15.10 上配置vim
2016/01/25 Python
Django模型修改及数据迁移实现解析
2019/08/01 Python
python pycharm最新版本激活码(永久有效)附python安装教程
2020/09/18 Python
韩国江南富人区高端时尚百货商场:Galleria(格乐丽雅)
2018/03/27 全球购物
自我鉴定怎么写
2013/12/05 职场文书
三下乡活动方案
2014/01/31 职场文书
政风行风建设责任书
2014/07/23 职场文书
四风问题班子对照检查材料
2014/09/27 职场文书
2014年行政工作总结
2014/11/19 职场文书
2014高三学生考试作弊检讨书
2014/12/14 职场文书
JavaScript 去重和重复次数统计
2021/03/31 Javascript
详解Nginx 工作原理
2021/03/31 Servers
浅谈Redis变慢的原因及排查方法
2022/06/21 Redis