功能强大的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就是常用于移动端网站的内容触摸滑动的一 ...
随机推荐
- linux创建快捷方式ln命令
创建快捷方式命令 ln -s 源文件 目标目录 //目标目录可以是完整路径,也可以是当前目录下的路径 ln 源文件 目标目录 在桌面上添加一个,创建一个文件夹(这里是work)的快捷方式 //源 cd ...
- SQL Server 磁盘请求超时的833错误原因分析以及解决
本文出处:http://www.cnblogs.com/wy123/p/6984885.html 最近遇到一个SQL Server服务器响应极度缓慢,并且出现客户端请求报错的情况,在数据库中的erro ...
- jquery.validate和jquery.form配合实现验证表单后AJAX提交
基础代码其实很简单,之后一点一点扩充.最终代码写在最后. 表单: <form action="@Url.Action("AddColumns","Cont ...
- Halcom学习笔记1——Halcon知识点
文件: 1.浏览HDevelop示例程序 2.程序另存在:Ctrl+Shift+S 3.导出:Ctrl+Shift+O X 编辑: 1.快捷键: F3 激活 F4 注销 重复查找:C ...
- JS全局对象的属性
全局对象是最顶层的对象,在浏览器环境指的是window对象.在ES5中,全局对象的属性与全局变量是等价的. var str = "hello"; function test(){ ...
- Java 基本类型和包装类型
讲基本类型和包装类型之前,首先要介绍,装箱和拆箱 装箱:基本类型转化为包装类型 拆箱:包装类型转化为拆箱类型 为什么要有包装类型?Java是面向对象的语言,Java中一切都是对象除了基本数据类型,所以 ...
- [leetcode]62. Unique Paths 不同路径
A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below). The ...
- （十）创建ROS消息和ROS服务
ROS总教程(中文版) 110.创建ROS消息和ROS服务
- stark组件开发之分页
""" 分页组件 """ class Pagination(object): def __init__(self, current_page ...
- Linux top命令中CPU信息的详解（转）
add by zhj: 下面的文章解释的很好了,这里再说明一下top命令中wa的含义,我们知道,当IO阻塞时,操作系统会把进程改为阻塞态,将CPU调度到运行其它进程. CPU在空闲状态下,会检查是否有 ...