超棒的JS移动设备滑动内容幻灯实现 - Swiper

最新推荐文章于 2018-10-12 11:40:36 发布
最新推荐文章于 2018-10-12 11:40:36 发布
阅读量1.1k 收藏
点赞数
分类专栏： javascript 文章标签： 分享 javascript 幻灯特效 移动幻灯特效
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jjfat/article/details/9134139
版权

日期：2013-6-20  来源：GBin1.com

超棒的JS移动设备滑动内容幻灯实现 - Swiper

在线演示

       如果你需要一款帮助你实现手机或者移动设备上内容幻灯实现的JS类库的话 ， Swiper是一个不错的选择，它不依赖于任何第三方的类库。因此体积非常小，适合运行在移动设备上。拥有非常完整的自定义选项，并且支持很多不同的幻灯展示，在线演示非常全！

主要特性

  • JS实现，不依赖于任何第三方的类库
  • 支持触摸设备上的滑动（swipe）操作
  • 支持水平和垂直的幻灯展示
  • 支持多个元素的幻灯展示（类似carousel）
  • 支持多种不同的自定义选项
  • 支持无限滚动，拥有插入，添加新幻灯页面的API
  • 支持Callback方法
  • 支持桌面浏览器，支持使用鼠标来拖拽

网站地址：http://www.idangero.us/sliders/swiper/

via 极客标签

来源：超棒的JS移动设备滑动内容幻灯实现 - Swiper

thegeek
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
swiper基本轮播演示
sun_chen_93的博客
11-25 695
基于swiper及基本轮播效果 自动轮播+无缝轮播 左右按钮控制效果 指示器（分页器） 代码示例： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>swiper轮播</title> <!-- 引入swiper css 及 js...
仿臭美app滑动
like_jack的博客
12-18 2120
就按我下面的复制就行，图片自己找一下吧。 choumei.min.css@charset "utf-8";*{margin:0;padding:0}html{height:100%}body{height:100%;background:url(../images/shouye_nvsheng_bg.png);background-size:100% 100%}#header img{width:
适用于多种设备的的滑块幻灯片插件--Swiper
05-29
今天为大家推荐一款支持多种设备（移动端，平板，pc端）的滑块幻灯片插。我测试的是ie7.可以查看我的博客http://write.blog.csdn.net/postedit/46230475
Mono是一款支持移动手机的响应式产品展示js幻灯片特效
08-09
Mono是一款支持移动手机的响应式产品展示js幻灯片特效。该特效在每一个幻灯片slide中展示一个产品大图，以及产品的名称，并且每一个幻灯片slide的背景颜色可以进行平滑的切换过渡。
移动端swiper卡片3D切换
六羽的博客
10-11 6117
此效果在安卓自带浏览器上不支持背景模糊效果（浏览器无此属性）， 且由于css中毛玻璃效果，导致背景图片切换会慢半拍。希望有大神看到能给我点解决办法。。。 效果图如下 大体实现效果： 借鉴swiper官网的demo效果：  http://www.swiper.com.cn/demo/choumei/ html代码：
基于vue.js轮播组件vue-awesome-swiper实现轮播图
12-03
一般做移动端轮播图的时候，最常用的就是Swiper插件了，而vue.js也有一个轮播组件vue-awesome-swiper，用法跟swiper相似。 1.安装vie-awesome-swiper nam install vue-awesome-swiper --save-dev 2.引用vie-awesome...
前端vue-awesome-swiper实现上下两级相互联动
12-02
前端vue-awesome-swiper实现上下两级相互联动，绝对优秀！！！
微信小程序触摸内容滑动解决方案we-swiper
03-29
微信小程序触摸内容滑动解决方案，API设计细节及命名参考于swiper.js.为什么要开发这款插件 官方swiper组件： 支持的事件回调很单一 从文档上看只是能支持横向滑动 拓展性不强we-swiper插件: 丰富的事件回调 丰富的...
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
10-17
说到h5的翻页，很定第一时间想到的是swiper。但是我当时想到的却是，vue里边怎么用swiper。这篇文章主要介绍了vue-awesome-swiper - 基于vue实现h5滑动翻页效果 ,需要的朋友可以参考下
微信小程序触摸内容滑动解决方案we-swiper.zip
最新发布
01-15
它的作用是提供一种系统性的方法，以有效地应对挑战、优化流程或实现目标。以下是方案的主要作用： 问题解决： 方案的核心目标是解决问题。通过系统性的规划和执行，方案能够分析问题的根本原因，提供可行的解决...
Banner3D效果的实例
zhang106209的博客
10-12 1885
此实例用RecyclerView实现无限轮播图，效果3d版，如下图：   1.BannerLayout.java package com.zw.mylibrary.banner; import android.content.Context; import android.content.res.Resources; import android.content.res.TypedA...
viewpager做一个3d轮播图
yang_niuxxx的博客
11-09 2456
以前找过这方面的控件。认为应该很难。看了鸿洋大神的博客发现也太简单了吧 效果图： 代码： /** * 用viewpager做一个3d效果的轮播图 * soeasy * 给viewpager加上一个切换动画就ok了。 * 我们在给它加上无限轮播功能 */ public class MainActivity extends AppCompatActivity {
支持手机触屏滑动的js图片幻灯片-js对象
yzs614899753的专栏
05-26 1996
//滚动图片构造函数 function ScrollPic(scrollContId,arrLeftId,arrRightId,dotListId,listType){     this.scrollContId = scrollContId; //内容容器ID   this.arrLeftId = arrLeftId; //左箭头ID   this.arrRightId = arrR
移动端整页滑屏示例
weixin_30394669的博客
11-10 348
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user...
JS 手机精简幻灯片
一直专注于互联网
10-16 315
var curIndex = 0; var timeInterval = 4000; var arr = new Array(); arr[0] = "fukeb.jpg"; arr[1] = "baopi.jpg"; arr[2] = "renliub.jpg"; setInterval(changeImg, timeInterval); function changeIm...
js滚动,滑动,幻灯片,轮播,swipe js滚动,滑动,幻灯片,轮播
小静的专栏
03-05 2364
我也不知道叫什么功能通通叫出来得了,js滚动,滑动,幻灯片,轮播图 下载插件swipe.js,swipe.css ( http://download.csdn.net/download/u014596302/9771299 )俩文件 引入html中 测试内容滑动效果 /* Swipe 2 required styles */ .swip
vue-awesome-swiper实现内容翻页
11-22
以下是使用vue-awesome-swiper实现内容翻页的示例： 1. 首先安装vue-awesome-swiper： ```shell npm install vue-awesome-swiper --save-dev ``` 2. 在Vue组件中引入vue-awesome-swiper： ```javascript ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值