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 相关文章推荐
jQuery 可以拖动的div实现代码 脚本之家修正版
Jun 26 Javascript
jquery 简单的进度条实现代码
Mar 11 Javascript
JS getStyle获取最终样式函数代码
Apr 01 Javascript
js中reverse函数的用法详解
Dec 26 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
Oct 16 Javascript
详谈JavaScript 匿名函数及闭包
Nov 14 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
Jun 12 Javascript
js的函数的按值传递参数(实例讲解)
Nov 16 Javascript
Webpack实战加载SVG的方法
Dec 26 Javascript
vue-for循环嵌套操作示例
Jan 28 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
Jun 01 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
Jul 24 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
Mootools 1.2教程 排序类和方法简介
2009/09/15 Javascript
Grid得到选择行数据的方法总结
2011/01/17 Javascript
input:checkbox多选框实现单选效果跟radio一样
2014/06/16 Javascript
Google Maps API地图应用示例分享
2014/10/23 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
2015/01/09 Javascript
使用js画图之饼图
2015/01/12 Javascript
javascript实现限制上传文件大小
2015/02/06 Javascript
jquery表单验证插件formValidator使用方法
2016/04/01 Javascript
js实现短信发送倒计时功能(正则验证)
2017/02/10 Javascript
几行js代码实现自适应
2017/02/24 Javascript
微信小程序 蓝牙的实现实例代码
2017/06/27 Javascript
js读取本地文件的实例
2017/12/22 Javascript
Vue.extend 编程式插入组件的实现
2019/11/18 Javascript
python实现flappy bird小游戏
2018/12/24 Python
Python求均值,方差,标准差的实例
2019/06/29 Python
Python 函数绘图及函数图像微分与积分
2019/11/20 Python
使用Keras 实现查看model weights .h5 文件的内容
2020/06/09 Python
使用tensorflow根据输入更改tensor shape
2020/06/23 Python
用python写一个带有gui界面的密码生成器
2020/11/06 Python
Python截图并保存的具体实例
2021/01/14 Python
如何避免常见的6种HTML5错误用法
2017/11/06 HTML / CSS
椰子猫砂:CatSpot
2018/08/27 全球购物
KENZO官网:高田贤三在法国创立的品牌
2019/05/16 全球购物
优秀技术工人先进材料
2014/02/17 职场文书
文化宣传方案
2014/03/13 职场文书
七匹狼男装广告词
2014/03/21 职场文书
公司承诺书范文
2014/05/19 职场文书
学校安全生产承诺书
2014/05/23 职场文书
党员民主评议个人总结
2014/10/20 职场文书
单位租车协议书
2015/01/29 职场文书
2015年设计师个人工作总结
2015/04/25 职场文书
裁员通知
2015/04/25 职场文书
追讨欠款律师函
2015/05/27 职场文书
Html5获取用户当前位置的几种方式
2022/01/18 HTML / CSS
MSSQL基本语法操作
2022/04/11 SQL Server
Ubuntu Server 安装Tomcat并配置systemctl
2022/04/28 Servers