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 相关文章推荐
extjs fckeditor集成代码
May 10 Javascript
一个简单的js动画效果代码
Jul 20 Javascript
解析jQuery与其它js(Prototype)库兼容共存
Jul 04 Javascript
JavaScript解析URL参数示例代码
Aug 12 Javascript
node.js中的fs.symlinkSync方法使用说明
Dec 15 Javascript
JavaScript仿静态分页实现方法
Aug 04 Javascript
基于js对象,操作属性、方法详解
Aug 11 Javascript
新闻上下滚动jquery 超简洁(必看篇)
Jan 21 Javascript
js实现一个猜数字游戏
Mar 31 Javascript
JS脚本加载后执行相应回调函数的操作方法
Feb 28 Javascript
vue 根据数组中某一项的值进行排序的方法
Aug 30 Javascript
vue3.0 上手体验
Sep 21 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相当简单的分页类
2008/10/02 PHP
PHP简单判断字符串是否包含另一个字符串的方法
2016/03/25 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
Javascript 错误处理的几种方法
2009/06/13 Javascript
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
2010/03/21 Javascript
JS文本框不能输入空格验证方法
2013/03/19 Javascript
jQuery 事件的命名空间简单了解
2013/11/22 Javascript
Javascript小技巧之生成html元素
2014/05/15 Javascript
jquery attr方法获取input的checked属性问题
2014/05/26 Javascript
JS不能跨域借助jquery获取IP地址的方法
2014/08/20 Javascript
javascript设置连续两次点击按钮时间间隔的方法
2014/10/28 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
2015/12/29 Javascript
DWR中各种java方法的调用
2016/05/04 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
2016/05/17 Javascript
JavaScript中ES6 Babel正确安装过程
2016/07/18 Javascript
vue 怎么创建组件及组件使用方法
2017/07/27 Javascript
Ionic学习日记实现验证码倒计时
2018/02/08 Javascript
尝试自己动手用react来写一个分页组件(小结)
2018/02/09 Javascript
基于webpack4搭建的react项目框架的方法
2018/06/30 Javascript
Vue中使用clipboard实现复制功能
2018/09/05 Javascript
es6数值的扩展方法
2019/03/11 Javascript
Bootstrap实现模态框效果
2019/09/30 Javascript
对python中的logger模块全面讲解
2018/04/28 Python
Python实现的质因式分解算法示例
2018/05/03 Python
python实现简单的单变量线性回归方法
2018/11/08 Python
python基于socket进行端口转发实现后门隐藏的示例
2019/07/25 Python
数据库的约束含义
2012/09/09 面试题
使用Vue.js和MJML创建响应式电子邮件
2021/03/23 Vue.js
高三地理教学反思
2014/01/11 职场文书
更夫岗位责任制
2014/02/11 职场文书
2014-2015学年工作总结
2014/11/27 职场文书
英语读书笔记
2015/07/02 职场文书
2016年感恩节活动总结大全
2016/04/01 职场文书
为什么在foreach循环中JAVA集合不能添加或删除元素
2021/06/11 Java/Android
手残删除python之后的补救方法
2021/06/26 Python
微信小程序APP页面的之间的相互传递参数以及自定义组件
2022/04/19 Javascript