功能强大的swiper插件
概述
今天体验了一下swiper,真是太强大了,无论是PC端还是移动端,各种轮播滑块效果随便实现.美中不足的是,有些实现需要自己想办法.下面我记录下我的需求和我的实现,供以后开发时参考,相信对其他人也有用.
这里是swpier.js官网.这里是swiper的官方demo.
需要说明的是,如果要兼容IE,那么必须使用swiper2.x.x,这里是swpier2.js官网
另外下面的实现有很多不可取之处,是我比较早期的版本了.
自己的需求
- 全屏且没有滑动条
- 点击链接可以跳转到其它slide.
- 自定义分页器.
初始demo
这是初始demo代码,直接复制到html文件中就可以打开了(需要联网).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.0/css/swiper.min.css">
<!-- Demo styles -->
<style>
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-wrapper{
transition-delay:.3s;
}
.swiper-container {
width: 500px;
height: 300px;
margin: 20px auto;
}
.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;
}
.swiper-slide:nth-child(2){
background:#3183ff;
color:#fff;}
.swiper-slide p{
transform:translateX(-200px);
opacity:0;
transition:all .4s;}
.ani-slide p{
transform:translateX(0);
opacity:1;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><p>Slide 1</p></div>
<div class="swiper-slide"><p>Slide 2</p></div>
<div class="swiper-slide"><p>Slide 3</p></div>
</div>
<div class="swiper-pagination"></div>
</div>
<!-- Swiper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.0/js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container',{
direction : 'vertical',
followFinger : false,
speed:800,
mousewheel: true,
pagination : {
el:'.swiper-pagination',
},
on:{
init:function(swiper){
slide=this.slides.eq(0);
slide.addClass('ani-slide');
},
transitionStart: function(){
for(i=0;i<this.slides.length;i++){
slide=this.slides.eq(i);
slide.removeClass('ani-slide');
}
},
transitionEnd: function(){
slide=this.slides.eq(this.activeIndex);
slide.addClass('ani-slide');
},
}
});
</script>
</body>
</html>
实现需求的test文件
需要说明的是,swiper不兼容ie.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.0/css/swiper.min.css">
<!-- Demo styles -->
<style>
::-webkit-scrollbar {display:none}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-wrapper{
transition-delay:.3s;
}
.swiper-container {
width: 100%;
height: 942px;
margin: 20px auto;
}
.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;
}
.swiper-slide:nth-child(2){
background:#3183ff;
color:#fff;}
.swiper-slide p{
transform:translateX(-200px);
opacity:0;
transition:all .4s;}
.ani-slide p{
transform:translateX(0);
opacity:1;
}
.swiper-pagination-bullet:nth-child(1) {
height: 20px;
width: 30px;
}
.test {
cursor: pointer;
color: blue;
text-decoration: underline;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<p>Slide 1</p>
<div class="test">点我翻到第二页</div>
</div>
<div class="swiper-slide"><p>Slide 2</p></div>
<div class="swiper-slide"><p>Slide 3</p></div>
</div>
<div class="swiper-pagination"></div>
</div>
<!-- Swiper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.0/js/swiper.min.js"></script>
<!-- Jquery -->
<script
src="http://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<!-- Initialize Swiper -->
<script>
$('.test').click(function() {
swiper.slideTo(1, 800, false);
});
var swiper = new Swiper('.swiper-container',{
direction : 'vertical',
followFinger : false,
speed:800,
mousewheel: true,
pagination : {
el:'.swiper-pagination',
},
on:{
init:function(swiper){
slide=this.slides.eq(0);
slide.addClass('ani-slide');
},
transitionStart: function(){
for(i=0;i<this.slides.length;i++){
slide=this.slides.eq(i);
slide.removeClass('ani-slide');
}
},
transitionEnd: function(){
slide=this.slides.eq(this.activeIndex);
slide.addClass('ani-slide');
},
}
});
</script>
</body>
</html>
功能强大的swiper插件的更多相关文章
- 基于JS功能强大的日期插件Kalendae
开发中需要一个日期插件,可以在zepto下使用,可以选择日期段,可以设置不可选日期 找到一个完全满足的,并且基于JS不依赖于任何库. 在线演示:http://chipersoft.com/Kalend ...
- 功能强大的滚动播放插件JQ-Slide
查看效果:http://keleyi.com/keleyi/phtml/jqplug/4.htmJQ-Slide插件功能强大,滚动方式自由多样全部滚动方式 方式一 方式二 方式三 方式四 方式五 方式 ...
- Vanilla Masker – 功能强大的输入过滤插件
Vanilla Masker 是一个纯 JavaScript 实现的输入内容过滤和自动转换插件.现在你可以使用一个简单而纯粹的 JavaScript 库来控制你的 input 元素,而不需要加载 jQ ...
- 20+功能强大的jQuery/CSS3图片特效插件
以下是分享的20几个不错的图片特效插件,基于jQuery和CSS3. 1.jQuery图片下滑切换播放效果 这是一款基于jQuery的焦点图插件,这款焦点图的特点是有向下滑动的动画效果,滑到底部时,有 ...
- 插件介绍 ：cropper是一款使用简单且功能强大的图片剪裁jQuery插件。
简要教程 cropper是一款使用简单且功能强大的图片剪裁jQuery插件.该图片剪裁插件支持图片放大缩小,支持鼠标滚轮操作,支持图片旋转,支持触摸屏设备,支持canvas,并且支持跨浏览器使用. c ...
- 功能强大的文件上传插件带上传进度-WebUploader
WebUploader是由Baidu WebFE(FEX)团队开发的一个以HTML5/FLASH构建的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用老 ...
- jQuery功能强大的图片查看器插件
简要教程 viewer是一款功能强大的图片查看器jQuery插件.它可以实现ACDsee等看图软件的部分功能.它可以对图片进行移动,缩放,旋转,翻转,可以前后浏览一组图片.该图片查看器还支持移动设备, ...
- ZBrush中功能强大的插件PaintStop
PaintStop是ZBrush®3.1的手绘插件,可以比较真实的模拟手绘风格,尤其是用水彩笔刷画水墨风格画.PaintStop插件可供用户免费使用. PaintStop是一款功能强大的插件,已经被添 ...
- 移动端网站的内容触摸滑动-Swiper插件
手机平板等大多移动端站点都会有触摸滑动内容的功能,公司移动端站点(m.muzhiwan.com)的标题广告滑动以及轮播效果就是用的Swiper插件. Swiper就是常用于移动端网站的内容触摸滑动的一 ...
随机推荐
- selenium 3.0变化
Selenium3.0的变化 最大的变化应该是去掉了Selenium RC 了,这是必然的结果.Selenium RC 是Selenium1.0的产物,Selenium2.0以WebDriver为主, ...
- (转).net反编译工具JustDecompile
开源的反编译工具 JustDecompile https://www.telerik.com/blogs/justdecompile-engine-becomes-open-source https ...
- HTTPS SSL/TLS协议
要说清楚 HTTPS 协议的实现原理,至少需要如下几个背景知识.1. 大致了解几个基本术语(HTTPS.SSL.TLS)的含义2. 大致了解 HTTP 和 TCP 的关系(尤其是“短连接”VS“长连接 ...
- javaMail实现收发邮件（二）
JavaMail API常用类 JavaMail API使用javax.mail.Message类来表示一封邮件,Message类是一个抽象类,所以我们需要使用其子类javax.mail.intern ...
- 使用jmail发送短信
原文链接 https://blog.csdn.net/sdaujsj1/article/details/79248469 pom <!-- https://mvnrepository.com/a ...
- 异常解决 Unable to write generated Java files for schemas: null
错误是在使用cxf调用其他系统接口时报出的.而且问题很诡异,只有服务器调用时才报错,本地直接写main方法直接调用却正常的.以下是异常的堆栈: ERROR c.k.p.webservice.WebSe ...
- jquery.validate.js的简单示例
一.官方资料 官网 github 二.html <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...
- 设计模式学习心得<工厂方法 Factory Method>
概述 意图 业务代码中常常有构造对象的过程,它拥有大量的参数.并且有很多地方需要这对象. 简化对象构造过程. 主要解决 一个类在不同场景的频繁地创建,让不同对象的创建更有语义化,提高代码复用性. 何时 ...
- Java多线程系列3 synchronized 关键词
先来看一个线程安全的例子 ,两个线程对count进行累加,共累加10万次. public class AddTest { public static void main(String[] args) ...
- Oracle学习——第一章
Oracle数据库特点:安全性高,数据类型丰富 Oracle是由美国甲骨文公司开发的一款数据库产品 -------------------------------------------------- ...