移动端滑动插件 swiper

swiper.js能适用于用PC网页,也能使用移动端页面,之前用TouchSwipe,感觉没有swiper.js强大,TouchSwipe有一个bug,在滑动区域有连接的时候(大面积的a),默认点击会无效,只能滑动,即时用jq去模拟点击也是失效的,也许是自己没有发现正确使用方法,求问度娘,发现swiper神器。。。

下面放上代码,

//滑动效果
        var swiper = new Swiper(‘.swiper-container‘, {
            pagination: ‘.swiper-pagination‘,//分页
            paginationClickable: true,//是否允许点击
            paginationBulletRender: function (index, className) {
                return ‘<a class="‘ + className + ‘">‘ + aNav[index] + ‘</a>‘;//自定义分页导航的样式,如果不需要自定义分页样式,这段删除即可
  } });

如果不需要分页,直接

var swiper = new Swiper(‘.swiper-container‘)即可

中文介绍网站:http://www.swiper.com.cn/

英文网站:http://www.idangero.us/swiper/#.ViWxbdKqpBc

时间: 2024-08-21 00:59:06

移动端滑动插件 swiper的相关文章

移动端触摸滑动插件Swiper

移动端触摸滑动插件Swiper 04/02/2015 一.了解Swiper 目前移动端项目一般都需要具有触屏焦点图的效果,如果你也需要实现这一功能的话,Swiper是一个不错的选择. 1.他不需要加载任何公共库(如jQuery)即可运行,这保证了Swiper的轻量和运行速度.Swiper也可以在加载了公共库的环境下安全的动行,如jQuery,Zepto,jQuery Moblie等. 2.Swiper默认的触摸比例为1:1,你可以通过修改Swiper的设置来改变这个比例. 3.Swiper 增加

仿移动端触摸滑动插件swiper,的简单实现

? /** * @author lyj * @Date 2016-02-04 * @Method 滑动方法 针对一个大容器内部的容器做滑动封装 * @param * args args.swipeDom 大容器对象 * args.swipeType 滑动类型 * args.swipeDistance 缓冲距离 * 注意:子容器的高宽度是取的内容的高宽 所以padding的大小有影响 */ if(!window.itlyj){ window.itlyj = {}; } itlyj.iScroll

移动端触摸滑动插件Swiper使用指南极吉林快三带红黑玩法

首先我们需要下载Swiper的相关文件:吉林快三带红黑玩法 下载地址 QQ2952777280 我们可以直接从Github代码仓库中下载. 或者通过Bower下载: $ bower install swiper或者使用Atmosphere将Swiper制作成Meteor包: $ meteor add nolimits4web:swiper或者使用NMP(JavaScript包管理工具)下载: $ npm install swiper下载压缩包后解压,我们需要用到的js文件和css文件都在dist

移动端滑动效果 swiper 4.0.7

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>每日优鲜</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=n

移动端左右滑动插件

前几天决定写一个基于jQuery的移动端大跨度滑动插件,大致可以设置的参数有: num: 3, //Wrap内子元素个数, >0 index: 0, //初始化索引值 initX: 10, //X轴滑动大于此属性触发事件 U.px limitX: 30, //X轴滑动大于此属性触发滑动 U.px limitY: 70, //Y轴滑动大于些属性禁止滑动 U.px speed: 300, //滚屏速度, 值越大越慢 U.ms [>=0 && <=1] edgeSlideVal

手机触屏滑动插件idangerous.swiper.js

手机触屏滑动插件 idangerous.swiper.js 演示地址:http://www.idangero.us/sliders/swiper/demos.php 下载地址:https://github.com/nolimits4web/Swiper

移动端触摸滑动插件swipe.js

插件特色 swipe.js是一个比较有名的触摸滑动插件,它能够处理内容滑动,支持自定义选项,你可以让它自动滚动,控制滚动间隔,返回回调函数等.经常可见使用在移动前端开发中. 使用方法 下面是一个比较简单的使用例子,添加适当的HTML代码和js代码即可. <div id='slider' class='swipe'> <div class='swipe-wrap'> <div></div> <div></div> <div>

移动前端滑动插件——JRoll面世

又过了一年,终于,第三篇博文要出炉了. 去年9月底,结束创业生涯后,我进入了一家外包公司从事移动前端工作,洽洽这年html5火到要爆,而具备html5技能的工程师却千里难觅,虽然我一直从事PC端的工作,但凭借扎实的js基础,也谋了个中级工程师的职位.多学点东西准没错的. 从事正规的前端工作后,我接触到了underscore.ratchet.backbone.requirejs.seajs.cordova.angular等等一大堆前端框架工具,不禁感慨,原来我以前的圈子是那么的渺小.iscroll

推荐一款手机端的图片滑动插件iSlider

首先先放出中文官方地址   http://be-fe.github.io/iSlider/index.html 这是demo 众所周知,移动端的图片滑动插件有很多,为什么我要推荐这个iSlider呢? 这个插件吸引我的有两点, 一是它不依赖与jquery,采用原生代码书写.二是它使用起来非常容易,而且除了图片,还支持普通的dom元素,滑动方式多样,效果丰富. 但是它也有些缺点,其一就是它提供的接口太少了. 在为轮播图片提供一些功能按钮时,比如说,上一张.下一张.自动播放等.使用这个插件就有些力不