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 相关文章推荐
Prototype Object对象 学习
Jul 12 Javascript
基于jquery的滚动新闻列表
Jun 19 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
Aug 01 Javascript
JavaScript基本编码模式小结
May 23 Javascript
jquery 获取标签名(tagName)示例代码
Jul 11 Javascript
Node.js的Web模板引擎ejs的入门使用教程
Jun 06 Javascript
Boostrap实现的登录界面实例代码
Oct 09 Javascript
Angular动态添加、删除输入框并计算值实例代码
Mar 29 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
Jan 16 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
Jan 21 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
Feb 01 Javascript
vue.js单文件组件中非父子组件的传值实例
Sep 13 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
冰滴咖啡制作步骤
2021/03/03 冲泡冲煮
ThinkPHP连接数据库及主从数据库的设置教程
2014/08/22 PHP
PHP rsa加密解密使用方法
2015/04/27 PHP
php封装json通信接口详解及实例
2017/03/07 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
js中的window.open返回object的错误的解决方法
2009/08/15 Javascript
菜鸟javascript基础资料整理2
2010/12/06 Javascript
Jquery中对数组的操作代码
2011/08/12 Javascript
js实现在页面上弹出蒙板技巧简单实用
2013/04/16 Javascript
jQuery Form 页面表单提交的小例子
2013/11/15 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
2014/10/30 Javascript
Javascript中innerHTML用法实例分析
2015/01/12 Javascript
异步JavaScript编程中的Promise使用方法
2015/07/28 Javascript
JS封装的选项卡TAB切换效果示例
2016/09/20 Javascript
String字符串截取的四种方式总结
2016/11/28 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
2016/12/09 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
微信小程序视图template模板引用的实例详解
2017/09/20 Javascript
详解从买域名到使用pm2部署node.js项目全过程
2018/03/07 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
2019/03/01 Javascript
原生js实现针对Dom节点的CRUD操作示例
2019/08/26 Javascript
vue 强制组件重新渲染(重置)的两种方案
2019/10/29 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
2020/05/18 Javascript
Vue实现附件上传功能
2020/05/28 Javascript
[03:07]DOTA2英雄基础教程 冰霜诅咒极寒幽魂
2013/12/06 DOTA
Python中函数的参数定义和可变参数用法实例分析
2015/06/04 Python
windows下python之mysqldb模块安装方法
2017/09/07 Python
Python编程pygal绘图实例之XY线
2017/12/09 Python
Python提取频域特征知识点浅析
2019/03/04 Python
python实现的自动发送消息功能详解
2019/08/15 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
CSS3新增布局之: flex详解
2020/06/18 HTML / CSS
读书演讲主持词
2014/03/18 职场文书
2014年个人年终总结
2015/03/09 职场文书
Python深度学习之实现卷积神经网络
2021/06/05 Python