具有可变宽度的jQuery触摸滑块插件

Posted 2023-05-09

【中文标题】具有可变宽度的jQuery触摸滑块插件

【英文标题】：jQuery touch slider plugin with variable width

【发布时间】：2013-04-14 14:04:32

【问题描述】：

我花了大半个下午的时间在谷歌上搜索这个，但没有成功，所以才求助于这里。

我正在寻找具有以下功能的 jQuery 滑块插件：

响应式 触摸/ios 友好 将允许可变宽度幻灯片

我在这里找到了一个接近我需要但不支持触摸的： http://jquery.lemmonjuice.com/plugins/slider-variable-widths.php

我目前正在处理的网站在这里：http://joeholt.co.uk/design/lilys-kitchen/。这显示了最终结果的外观，但目前它不允许可变宽度幻灯片。我目前正在为此使用http://bxslider.com/。在一个完美的世界中，我也可以将 vimeo 嵌入其中，但我可以解决这个问题。

【参考方案1】：

This one 效果很好！它也很好地支持触摸。

编辑：

使用this jQuery touch swipe plugin，以下代码可能有效。

$('.slider-wrapper').swipe(
    swipeRight:function() 
        $('.bx-prev').click();
    ,  
    swipeLeft:function() 
        $('.bx-next').click();
    
);

我知道它很原始，但它可能只是完成这项工作。

【讨论】：

看起来不错，但它支持不同大小的幻灯片吗？

不，抱歉。这只是触摸支持的解决方案。没有可变宽度的项目this 将是最好的方法。

我可能有一个解决方案，再给我几分钟，我会告诉你的。

使用滑动插件，当您在滑块上向左或向右滑动时，它会单击下一个或上一个按钮

如果你看看我当前的例子。 joeholt.co.uk/design/lilys-kitchen 它在 ipad 上滑动很好，只是不允许我有可变宽度的幻灯片

【参考方案2】：

这个也应该工作（variableWidth：true）： http://kenwheeler.github.io/slick/