swiper轮播图插件
一、简介
①Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
②Swiper 是一款免费以及轻量级的移动设备触控滑块的框架，使用硬件加速过渡（如果该设备支持的话）。主要使用与移动端的网站、网页应用程序（web apps），以及原生的应用程序（native apps）。
③主要是为IOS而设计的，同时，在Android、WP8系统以及现代桌面浏览器也有着良好的用户体验。
二、文档
①中文网址：http://2.swiper.com.cn/
②中文网地址：http://www.swiper.com.cn/
③Swiper目前有Swiper2、Swiper3、Swiper4几个版本，每个版本的使用方法可能会有所不同，具体参照文档
三、使用方法
①加载
- 首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。
<link rel="stylesheet" href="path/to/swiper.min.css">
...
...
<script src="path/to/swiper.min.js"></script>
- 如果你的页面加载了jQuery.js或者zepto.js，你可以选择使用更轻便的swiper.jquery.min.js
...
<link rel="stylesheet" href="path/to/swiper.min.css">
...
<script src="path/to/jquery.js"></script>
<script src="path/to/swiper.jquery.min.js"></script>
②HTML内容
<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> <!-- 如果需要分页器 -->
<div class="swiper-pagination"></div> <!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div> <!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
③初始化
- 初始化Swiper：最好是挨着</body>标签 （函数调用）
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical',
loop: true, // 如果需要分页器
pagination: '.swiper-pagination', // 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev', // 如果需要滚动条
scrollbar: '.swiper-scrollbar',
})
</script>
</body>
- 如果不能写在HTML内容的后面，则需要在页面加载完成后再初始化
<script type="text/javascript">
window.onload = function() {
...
}
</script> 或者这样（Jquery和Zepto）
<script type="text/javascript">
$(document).ready(function () {
...
})
</script>
四、示例（轮播图）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>轮播图</title>
<!-- 引入swiper3.0 css文件 -->
<link rel="stylesheet" href="swiper/css/swiper.min.css">
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
.container {
position: relative;
width: 750px;
margin: 0 auto;
}
</style>
</head>
<body>
<!-- 版心 -->
<div class="container">
<!-- 轮播图 -->
<div class="swiper-container">
<ul class="swiper-wrapper">
<li class="swiper-slide"><a href="#"><img src="data:images/banner01.jpg" alt=""></a></li>
<li class="swiper-slide"><a href="#"><img src="data:images/banner02.jpg" alt=""></a></li>
<li class="swiper-slide"><a href="#"><img src="data:images/banner03.jpg" alt=""></a></li>
<li class="swiper-slide"><a href="#"><img src="data:images/banner04.jpg" alt=""></a></li>
<li class="swiper-slide"><a href="#"><img src="data:images/banner05.jpg" alt=""></a></li>
<li class="swiper-slide"><a href="#"><img src="data:images/banner06.jpg" alt=""></a></li>
<li class="swiper-slide"><a href="#"><img src="data:images/banner07.jpg" alt=""></a></li>
<li class="swiper-slide"><a href="#"><img src="data:images/banner08.jpg" alt=""></a></li>
</ul>
<!-- 分页器 -->
<div class="swiper-pagination"></div>
</div>
</div>
<!-- 引入swiper3.0插件脚本 -->
<script src="swiper/js/swiper.min.js"></script>
<!-- js初始化脚本 -->
<script>
window.onload=function(){
/* 轮播图 */
new Swiper('.swiper-container',{
autoplay:1000,
loop:true,
pagination:'.swiper-pagination',
autoplayDisableOnInteraction:false
});
}
</script>
</body>
</html>
swiper轮播图插件的更多相关文章
- Swiper轮播图
今天咱们来说一下.Swiper轮播图. 超级简单的: 翠花,上代码: <!DOCTYPE html> <html lang="en"> < ...
- Vue轮播图插件---Vue-Awesome-Swiper
轮播图插件 Vue-Awesome-Swiper 地址:https://github.com/surmon-china/vue-awesome-swiper 安装:npm install vue-aw ...
- vue轮播图插件之vue-awesome-swiper
移动端轮播图插件,在使用iview图形界面插件中的carousel组件无法实现触摸滑动后,转而使用vue-awesome-swiper插件 1.npm安装 npm i vue-awesome-swip ...
- js 原生轮播图插件
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery, js轮播图插件Swiper3
轮播图插件Swiper3 HTML代码 如果只是简单的使用轮播图,直接复制我的html代码就可以. 如果想要高级一些,就自己去看文档吧 <!DOCTYPE html> <html l ...
- 学习笔记： js插件 —— SuperSlide 2 （轮播图插件，PC用）
SuperSlide 2 轮播图插件,较老.但还好用. 适用于PC,是绑定到jquery上的方法: $.slide(); 如果在实际中找不到.slide方法,请检查jquery等.js文件的引入次序 ...
- 封装一个简单的原生js焦点轮播图插件
轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...
- jquery的fadeTo方法的淡入淡出轮播图插件
由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑.最近开发了一款基于jquery的fadeTo方法的轮播图插件, ...
- 第124天：移动web端-Bootstrap轮播图插件使用
Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Car ...
随机推荐
- Docker容器跨主机通信之：OVS+GRE
一.概述 由于docker自身还未支持跨主机容器通信,需要借助docker网络开源解决方案 OVS OpenVSwich即开放式虚拟交换机实现,简称OVS,OVS在云计算领域应用广泛,值得我们去学习使 ...
- 【题解】Luogu P5294 [HNOI2019]序列
原题传送门 题意:给你一个长度为\(n\)的序列\(A\),每次询问修改一个元素(只对当前询问有效),然后让你找到一个不下降序列\(B\),使得这两个序列相应位置之差的平方和最小,并输出这个最小平方和 ...
- sql server 压缩日志文件
USE [master] GO ALTER DATABASE TestDB SET RECOVERY SIMPLE WITH NO_WAIT GO ALTER DATABASE TestDB SET ...
- word表格中怎么添加递增的序号
word2013表格中怎么添加递增的序号?word2013表格中想要让第一类自动显示递增序号,该怎么操作呢?下面我们就来分享两种方法,需要的朋友可以参考下 工具/原料 word2013 通过项目编 ...
- Idea中类实现Serializable接口 引入 serialVersionUID
idea实现Serializable接口,然后打出serialVersionUID的办法 setting>editor>Inspection>Java>Serializatio ...
- 阿里巴巴 Java 开发手册（四）： OOP 规约
. [强制]避免通过一个类的对象引用访问此类的静态变量或静态方法,无谓增加编译器解析成 本,直接用类名来访问即可. 2. [强制]所有的覆写方法,必须加@Override 注解. 说明:getObje ...
- 【转】【Salesforce】salesforce 零基础学习（十七）Trigger用法
看本篇之前可以相应阅读以下Trigger相关文章: 1.https://developer.salesforce.com/page/Trigger_Frameworks_and_Apex_Trigge ...
- Redhat下安装SAP的相关
Red Hat Enterprise Linux 6.x: Installation and Upgrade - SAP Note 1496410 Red Hat Enterprise Linux 7 ...
- 了解 npm install -S -D 的区别，看这篇就完事了
一.npm install -S -D 的区别 npm install module_name -S 即 npm install module_name --save 写入dependencies n ...
- 设置Linux 程序lib搜索目录
设置Linux 程序lib搜索目录:export LD_LIBRARY_PATH=$LD_LIBRARY_PATH:lib路径,例如: export LD_LIBRARY_PATH=$LD_LIBRA ...