功能强大的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就是常用于移动端网站的内容触摸滑动的一 ...
随机推荐
- RGB颜色值转化为long 型数字
通常我们表达颜色都是使用RGB值表示的,今天在VB中设置RGB值居然是一个整形数字,网上各种搜资料发现这个数字是怎么来的: 数值= 65536*Blue + 256* Green + Red
- 人人开源框架使用 renren fast
参考地址人人开源官网: https://www.renren.io/guide/ 1.介绍 1.1.项目描述 renren-fast 是一个轻量级的 Spring Boot 快速开发平台,能快速开发项 ...
- hive的常用操作
1.hive的数据类型 tinyint/smallint/int/bigint tinyint:从 0 到 255 的整型数据 smallint:从 0 到 65535 的整型数据 int:从 0 到 ...
- 43 【redis cluster】
有两篇文章不错,可以看下: 1,初步理解redis cluster:https://blog.csdn.net/dc_726/article/details/48552531 2,仔细理解redis ...
- [剑指Offer]7-重建二叉树
链接 https://www.nowcoder.com/practice/8a19cbe657394eeaac2f6ea9b0f6fcf6?tpId=13&tqId=11157&tPa ...
- [leetcode]88. Merge Sorted Array归并有序数组
Given two sorted integer arrays nums1 and nums2, merge nums2 into nums1 as one sorted array. Note: T ...
- angularJs, ui-grid 设置默认group， 及排序
- ubuntu系统安装微信小程序开发工具
在ubuntu系统中安装微信小程序开发工具之前,先要安装wine与git 一.安装wine 1.如果您的系统是64位,启用32位架构(如果您还没有) sudo dpkg --add-architect ...
- Centos7下安装Docker[z]
[z]https://www.cnblogs.com/qgc1995/p/9553572.html https://yq.aliyun.com/articles/691610?spm=a2c4e.11 ...
- 28.Mysql权限与安全
28.Mysql权限与安全28.1 Mysql权限管理 28.1.1 权限系统的工作原理对连接的用户进行身份认证,合法的用户通过认证,不合法的用户拒绝连接:对通过认证的合法用户赋予相应的权限,用户可以 ...