水平滑动滑块与jQuery和触摸设备的支持?

我需要制作一个像这样的产品滑块(请参阅红色区域)滑动滑块。

它应该在桌面,iPad和移动浏览器上工作。 你知道任何jQuery / jQuery的手机插件来实现这一目标。

在这里输入图像说明

我想要的效果几乎类似于这个http://manos.malihu.gr/tuts/jquery_thumbnail_scroller.html (但它不是触摸兼容的)

和苹果iPad应用“拖车”中的“Top 25”一样,

在这里输入图像说明

在我看来, iosSlider是惊人的。 它几乎可以在任何设备上工作,并且有很好的文档logging 这是免费的个人使用,但商业网站许可证费用20美元。

另外一个很好的select是来自同一作者的touchCarouselRoyalSlider 。 这两个有你需要的一切, 但也不是免费的 ,价格是10-12美元

我也build议http://cubiq.org/iscroll-4

但是如果你没有挖掘,试试这个插件

http://www.zackgrossbart.com/hackito/touchslider/

它工作得很好,并默认为桌面上的水平滑动条 – 它不像桌面上那么优雅,但它在触摸设备上运行得非常好

祝你好运!

如果我是你,我会根据事件规范实施我自己的解决scheme。 基本上,滑动是 – 触摸,触摸移动,触摸事件的处理。 这里是我自己的库处理iPhone触摸事件的摘录:

touch_object.prototype.handle_touchstart = function(e){ if (e.targetTouches.length != 1){ return false; } this.obj.style.zIndex = 100; e.preventDefault(); this.startX = e.targetTouches[0].pageX - this.geometry.x; this.startY = e.targetTouches[0].pageY - this.geometry.y; /* adjust for left /top */ this.bind_handler('touchmove'); this.bind_handler('touchend'); } touch_object.prototype.handle_touchmove = function(e) { e.preventDefault(); if (e.targetTouches.length != 1){ return false; } var x=e.targetTouches[0].pageX - this.startX; var y=e.targetTouches[0].pageY - this.startY; this.move(x,y); } touch_object.prototype.handle_touchend = function(e){ this.obj.style.zIndex = 10; this.unbind_handler('touchmove'); this.unbind_handler('touchend'); } 

我使用该代码来“移动”。 但是,您可以创build自己的algorithm,例如触发redirect到其他某个位置,也可以使用该移动来“移动/滑动”滑动所在的元素到其他位置。

因此,了解事情的基本原理,然后创build更复杂的解决scheme真的有帮助。 这可能也有帮助。

我用这个来创build我的解决scheme:

http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

你尝试过iosSlider吗? 它可以做到你所需要的。

http://iosscripts.com/iosslider-jquery-horizo​​ntal-slider-for-iphone-ipad-safari/

在这里看看iScroll v4: http ://cubiq.org/iscroll-4

它可能不是jQuery,但它适用于Desktop Mobile和iPad; 我已经在很多项目中使用过它,并将其与jQuery结合起来。

祝你好运!

这个可以满足你的需要:
http://caroufredsel.frebsite.nl/

添加jQuery的Touchwipe触摸支持

然后在configuration中添加

 scroll : { wipe: true } 

你见过WooThemes的FlexSlider吗? 我已经在最近的几个项目中使用过,取得了很大的成功 它也支持触摸,所以它可以在基于鼠标的浏览器以及iOS和Android的基于触摸的浏览器上运行。

我发现这个,希望它有助于http://www.zackgrossbart.com/hackito/touchslider/

我发现另一个: http : //swipejs.com/

似乎很好地工作,但是我遇到一个问题,当与OS X版本的Chrome引导配对。 如果跨浏览器的兼容性不是问题,那么你是黄金。

我已经为我的一个网站在开发过程中提供了这样的想法。

我已经使用CarClass的StepCarousel,因为它是唯一一个我发现,可以接受不同的图像大小在同一个卡鲁塞尔。

除了这个添加触摸滑动效果,我已经使用jquery.touchswipe插件;

而stepcarousel移动面板rigth或留下一个fonction,所以我可以使:

 $("#slider-actu").touchwipe({ wipeLeft: function() {stepcarousel.stepBy('slider-actu', 3);}, wipeRight: function() {stepcarousel.stepBy('slider-actu', -3);}, min_move_x: 20 }); 

您可以在此页面查看实际渲染

希望能帮到你。

看看jQuery的滚动视图( 在这里演示)。 这是用于该实验项目的git集线器存储库。 看看他们的html,看看需要包含哪些文件,以及要添加到要滚动的元素的属性。

我已经使用它可以在触摸设备上水平滚动div元素。

您可能对以下内容感兴趣:

  • jQuery Mobile Carousel ( github )
  • jQuery Mobile

我意识到这不是一个jQuery的解决scheme,但Sencha的触摸框架是非常好的build立你的目标用户界面。 示例(单击传送带侧边栏链接): http : //dev.sencha.com/deploy/touch/examples/kitchensink/

Checkout Portfoliojs jQuery插件: http : //portfoliojs.com

这个插件支持触摸设备,桌面和手机浏览器。 此外,它具有预加载function。

通过我的实验,最好的开源选项将是UIKIT的uikit滑块组件 。 而且这很容易实现,例如在你的情况下,你可以做这样的事情。

 <div data-uk-slider> <div class="uk-slider-container"> <ul class="uk-slider uk-grid-width-medium-1-4"> // width of the elements <li>...</li> //slide elements ... </ul> </div>