idangerous.swiper小记

最近做了一个复杂的产品组合效果,里面有用到处地方用swiper控件来展示

唉,说起来产品经理就在旁边的一段血泪史啊~ 前前后后改了三四个版本。每天起来的工作就是改改改~~~

做第一版本的时候卡点就是在外层swiper-container要设置一个固定宽度,无奈我想用宽度高度100%来计算,结果总是计算不到,最后无奈要晕菜的时候决定算了还是用JS来计算宽高吧,

谁知道琳琅满目的手机分辨率,屏幕大小呢?

需求是这样的:小屏幕的时候显示一个滑块,ipad的时候显示两个滑块,并且一次可以滑动两个滑块。

那时候的解决办法是这样的:小屏幕显示一个,大屏幕把两个滑块用JS slice方法合并起来 然后一次可以滑动两个,这样做的坏处就是滑块内容少 且单数的时候 最后一个只出现一个

结局就是这样:这样看起来很不友好啊,改成自由滑动吧,可以随意滑。

做第二版本的时候就是以上的结局咯, 做的时候卡在点击滑块要调整到相应的滑动块去,由于没有好好研究swiper控件的参数,结果自己写了一套关于iphone  ipad...的显示滑动问题。以为这样就可以交差,结果当然是不可令了。

这会儿需求又来了:这个高度统一的不要了,取其中一个滑块内最高的,滑块由于被程序改了“点击其他类别的item滑块不能对应到相应的地方”由于这个问题导致 原来做好的到相应地方的内容不生效了,我在想这控件应该有提供方法吧!

第三个版本如上,开始找方法了,于是用了实例对象.swiperto(index,speed,callback)就这样研究了会儿,用上去内容可以滑动,但是对应位置的圈圈没法定位,╮(╯▽╰)╭ 这个插曲我就不说了。反正是调用顺序问题了。

总结了下:绕了不少弯路啊,要是一开始就产品经理确认想要的原型呢?要是一开始就研究好控件提供的方法,那速度是不是快了很多呢?

吸取教训吧,不熟悉的东西 也许弯路是不可避免的。在走弯路的过程中学习也未必不是一个好事。

时间: 2024-11-06 11:35:29

idangerous.swiper小记的相关文章

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

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

idangerous swiper

最近使用Swipe.js,发现中文的资料很少,试着翻译了一下.能力有限,翻译难免错漏,请指出,多谢!如果想获得国外较多而全的文档,还是用google. 一了解SwiperSwiper 是一款免费以及轻量级的移动设备触控滑块的框架,使用硬件加速过渡(如果该设备支持的话).主要使用与移动端的网站.网页应用程序(web apps),以及原生的应用程序(native apps).主要是为IOS而设计的,同时,在Android.WP8系统以及现代桌面浏览器也有着良好的用户体验. 特征(feature)1.

Swiper 中文API手册(share)

翻译自:http://www.idangero.us/sliders/swiper/api.php http://www.idangero.us/sliders/swiper/index.php 一了解Swiper Swiper 是一款免费以及轻量级的移动设备触控滑块的框架,使用硬件加速过渡(如果该设备支持的话).主要使用与移动端的网站.网页应用程序(web apps),以及原生的应用程序(native apps).主要是为IOS而设计的,同时,在Android.WP8系统以及现代桌面浏览器也有

Swiper说明&&API手册

最近使用Swipe.js,发现中文的资料很少,试着翻译了一下.能力有限,翻译难免错漏,欢迎指出,多谢! 翻译自:http://www.idangero.us/sliders/swiper/api.php http://www.idangero.us/sliders/swiper/index.php 一了解SwiperSwiper 是一款免费以及轻量级的移动设备触控滑块的框架,使用硬件加速过渡(如果该设备支持的话).主要使用与移动端的网站.网页应用程序(web apps),以及原生的应用程序(na

Swiper Usage&&API

最近使用Swipe.js,发现中文的资料很少,试着翻译了一下.能力有限,翻译难免错漏,请指出,多谢!如果想获得国外较多而全的文档,还是用google. 一了解Swiper Swiper 是一款免费以及轻量级的移动设备触控滑块的框架,使用硬件加速过渡(如果该设备支持的话).主要使用与移动端的网站.网页应用程序(web apps),以及原生的应用程序(native apps).主要是为IOS而设计的,同时,在Android.WP8系统以及现代桌面浏览器也有着良好的用户体验. 特征(feature)1

Swiper API

本文分享自 http://www.cnblogs.com/scavengers/p/3760449.html 最近使用Swipe.js,发现中文的资料很少,试着翻译了一下.能力有限,翻译难免错漏,欢迎指出,多谢! 翻译自:http://www.idangero.us/sliders/swiper/api.php http://www.idangero.us/sliders/swiper/index.php 一了解SwiperSwiper 是一款免费以及轻量级的移动设备触控滑块的框架,使用硬件加速

Swiper的简单实用方法

最近项目中有用到一个非常强大的组件idangerous.swiper.js的组件,这个组件能够实现幻灯片的播放效果,而且有各种3D效果,大家可以去试一下,效果很不错的说! 这是这个项目的api文档:http://www.idangero.us/sliders/swiper/api.php GitHub上的地址:https://github.com/nolimits4web/Swiper 具体使用方法(copy的Swiper官网的代码): 首先在页面中引入css和js文件: <link rel=&qu

非常优秀的swiper插件————幻灯片播放、图片轮播

幻灯片播放.图片轮播----非常优秀的swiper插件 http://www.idangero.us/sliders/swiper/index.php    插件主页 http://www.idangero.us/sliders/swiper/api.php        插件API http://www.idangero.us/sliders/swiper/demos.php   插件DEMO <!DOCTYPE html> <html> <head> <met

Swiper 中文API手册(转自挨踢前端)

最近使用Swipe.js,发现中文的资料很少,试着翻译了一下.能力有限,翻译难免错漏,欢迎指出,多谢! 翻译自:http://www.idangero.us/sliders/swiper/api.php http://www.idangero.us/sliders/swiper/index.php 一了解Swiper Swiper 是一款免费以及轻量级的移动设备触控滑块的框架,使用硬件加速过渡(如果该设备支持的话).主要使用与移动端的网站.网页应用程序(web apps),以及原生的应用程序(n