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 相关文章推荐
alixixi runcode.asp的代码不错的应用
Aug 08 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
Feb 21 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
Feb 25 Javascript
详解JavaScript节流函数中的Throttle
Jul 16 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
Aug 15 Javascript
JS 调试中常见的报错问题解决方法
May 20 Javascript
详解Angular4中路由Router类的跳转navigate
Jun 09 Javascript
使用requirejs模块化开发多页面一个入口js的使用方式
Jun 14 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
Jun 19 Javascript
js中时间格式化的几种方法
Jul 22 Javascript
详解vue-cli脚手架中webpack配置方法
Aug 22 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
MySQL连接数超过限制的解决方法
2011/07/17 PHP
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
PHP执行普通shell命令流程解析
2020/08/24 PHP
Jjcarousellite 实现图片列表滚动的简单实例
2013/11/29 Javascript
浅析jquery某一元素重复绑定的问题
2014/01/03 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
2014/04/15 Javascript
用C/C++来实现 Node.js 的模块(一)
2014/09/24 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
详解JavaScript逻辑Not运算符
2015/12/04 Javascript
全屏js头像上传插件源码高清版
2016/03/29 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
2016/05/05 Javascript
AngularJs  unit-testing(单元测试)详解
2016/09/02 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
2016/11/07 Javascript
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
vue 实现全选全不选的示例代码
2018/03/29 Javascript
详解Vue webapp项目通过HBulider打包原生APP
2018/06/29 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
2019/05/26 Javascript
js图片无缝滚动插件使用详解
2020/05/26 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
2020/05/24 Javascript
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
Python实现连接postgresql数据库的方法分析
2017/12/27 Python
利用Python如何将数据写到CSV文件中
2018/06/05 Python
Python使用百度api做人脸对比的方法
2019/08/28 Python
python实现简单的井字棋游戏(gui界面)
2021/01/22 Python
美国温暖商店:The Warming Store
2018/12/15 全球购物
出国留学计划书
2014/04/27 职场文书
创业培训计划书
2014/05/03 职场文书
公开承诺书格式
2014/05/21 职场文书
人力资源管理毕业生自荐信
2014/06/26 职场文书
小学清明节活动总结
2014/07/04 职场文书
2015年小学体育工作总结
2015/05/22 职场文书
运动会开幕式通讯稿
2015/07/18 职场文书
《刷子李》教学反思
2016/02/20 职场文书
详解Java线程池是如何重复利用空闲线程的
2021/06/26 Java/Android
SQL Server远程连接的设置步骤(图文)
2022/03/23 SQL Server
详解flex:1什么意思
2022/07/23 HTML / CSS