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 相关文章推荐
this[] 指的是什么内容 讨论
Mar 24 Javascript
JavaScript 常用函数
Dec 30 Javascript
两个listbox实现选项的添加删除和搜索
Mar 01 Javascript
简单实用的反馈表单无刷新提交带验证
Nov 15 Javascript
node.js中的fs.lstat方法使用说明
Dec 16 Javascript
JavaScript为事件句柄绑定监听函数实例详解
Dec 15 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
Oct 28 Javascript
vue数据双向绑定原理解析(get &amp; set)
Mar 08 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
Apr 13 Javascript
vue router下的html5 history在iis服务器上的设置方法
Oct 18 Javascript
webpack4 + react 搭建多页面应用示例
Aug 03 Javascript
vue调用语音播放的方法
Sep 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
ThinkPHP实现非标准名称数据表快速创建模型的方法
2014/11/29 PHP
php将远程图片保存到本地服务器的实现代码
2015/08/03 PHP
PHP 二维数组和三维数组的过滤
2016/03/16 PHP
PHP版本的选择5.2.17 5.3.27 5.3.28 5.4 5.5兼容性问题分析
2016/04/04 PHP
Symfony2获取web目录绝对路径、相对路径、网址的方法
2016/11/14 PHP
CI框架AR数据库操作常用函数总结
2016/11/21 PHP
php写入txt乱码的解决方法
2019/09/17 PHP
javascript基本语法分析说明
2008/06/15 Javascript
基于Jquery的文字自动截取(提供源代码)
2011/08/09 Javascript
解析页面加载与js函数的执行 onload or ready
2013/12/12 Javascript
JavaScript获取按钮所在form表单id的方法
2015/04/02 Javascript
AngularJS上拉加载问题解决方法
2016/05/23 Javascript
使用vue.js实现联动效果的示例代码
2017/01/10 Javascript
Vue.js基础知识小结
2017/01/13 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
2017/03/08 Javascript
js实现3D图片环展示效果
2017/03/09 Javascript
vue自定义指令的创建和使用方法实例分析
2018/12/04 Javascript
layui 实现自动选择radio单选框(checked)的方法
2019/09/03 Javascript
Vue中img的src是动态渲染时不显示的解决
2019/11/14 Javascript
Python学生信息管理系统修改版
2018/03/13 Python
Python批处理删除和重命名文件夹的实例
2018/07/11 Python
python实现排序算法解析
2018/09/08 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
Python内存管理实例分析
2019/07/10 Python
Python+Redis实现布隆过滤器
2019/12/08 Python
keras实现基于孪生网络的图片相似度计算方式
2020/06/11 Python
详解python算法常用技巧与内置库
2020/10/17 Python
使用CSS3的rem属性制作响应式页面布局的要点解析
2016/05/24 HTML / CSS
html5 分层屏幕适配的方法
2018/03/16 HTML / CSS
Intersport西班牙:在线体育商店
2019/11/06 全球购物
英国排名第一的冲浪店:Ann’s Cottage
2020/06/21 全球购物
C# .NET面试题
2015/11/28 面试题
办公室副主任岗位职责
2013/11/25 职场文书
家电业务员岗位职责
2014/03/10 职场文书
节水倡议书范文
2014/04/15 职场文书
详解Go与PHP的语法对比
2021/05/29 PHP