支持jQuery和觸控設備的水平滑動滑塊？

Question

我需要制作一個像這樣的產品滑塊（參見紅色區域）滑動滑塊的動量。

它應該適用於桌面，iPad和移動瀏覽器。 你知道任何jquery / jquery移動插件來實現這一目標嗎？

我想要的效果幾乎類似於這個http://manos.malihu.gr/tuts/jquery_thumbnail_scroller.html （但它不兼容）

和Apple名為“Trailers”的iPad應用程序中的“Top 25”部分完全一樣

Answer 1

在我看來iosSlider太棒了。 它適用於幾乎所有設備，並且有很好的文檔記錄。 它可以免費供個人使用，但對於商業網站，許可費用為20美元。

另外一個很好的選擇是來自同一作者的touchCarousel或RoyalSlider 。 這兩個有你需要的一切， 但也不是免費的 ，價格為10-12美元

Answer 2

我也推薦http://cubiq.org/iscroll-4

但是如果你沒有挖掘那個嘗試這個插件

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

它工作得很好，默認為桌面上的水平滑動條 - 它在桌面上不如iscroll-4那么優雅，但它在觸摸設備上工作得很好

祝好運！

Answer 3

如果我是你，我會根據事件規范實現我自己的解決方案。 基本上，滑動是什么 - 它是觸摸，觸摸移動，觸摸事件的處理。 這里是我自己的lib的摘錄，用於處理iPhone touch事件：

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');
}

我用那段代碼“移動東西”。 但是，您可以創建自己的算法，例如觸發重定向到其他位置，而不是移動，或者您可以使用該移動來“移動/滑動”滑動所在的元素到其他位置。

因此，了解事物的基本知識然后創建更復雜的解決方案確實很有幫助。 這也許有幫助。

我用它來創建我的解決方案：

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

Answer 4

你試過iosSlider嗎？ 它可以完全滿足您的需求。

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

Answer 5

在這里查看iScroll v4： http ：//cubiq.org/iscroll-4

它可能不是jQuery，但它可以在桌面移動和iPad上運行得很好; 我在許多項目中使用它並將其與jQuery結合使用。

祝好運！

Answer 6

你見過WooThemes的FlexSlider嗎？ 我已經在最近的幾個項目中使用它並取得了巨大的成功。 它也啟用了觸控功能，因此它可以在基於鼠標的瀏覽器以及iOS和Android中基於觸摸的瀏覽器上運行。

Answer 7

這個可以滿足您的需求：
http://caroufredsel.frebsite.nl/

添加jquery Touchwipe以獲得觸摸支持

然后在配置中添加

scroll : {
wipe: true
}

Answer 8

對於我的一個網站來說，我已經在這個問題上做了這樣的事。

我已經將StepCarousel用於caroussel，因為它是我發現的唯一可以在同一個轉盤中接受不同圖像尺寸的卡車。

除了這個添加觸摸滑動效果之外，我還使用了jquery.touchswipe插件;

和stepcarousel移動面板rigth或左邊有一個功能，所以我可以：

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

您可以在此頁面查看實際渲染

希望對你有所幫助。

Answer 9

我發現了另一個： http ： //swipejs.com/

似乎工作得很好，但是當我在操作系統X版本的Chrome上與bootstrap配對時遇到問題。 如果整個跨瀏覽器兼容性不是問題，那么你就是金色的。

Answer 10

我找到了這個，希望它能有所幫助http://www.zackgrossbart.com/hackito/touchslider/

Answer 11

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

此插件支持觸摸設備，桌面和移動瀏覽器。 此外，它具有預加載功能。

Answer 12

根據我的經驗，最好的開源選項將是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>

Answer 13

這看起來很相似，並使用jQuery mobile http://www.irinavelychko.com/tutorials/jquery-mobile-gallery

並且，它的演示http://demo.irinavelychko.com/tuts/jqm-dialog-gallery.html

Answer 14

看看jQuery滾動視圖（ 這里演示）。 這是該實驗項目的git hub存儲庫。 查看他們的html以查看需要包含哪些文件以及要添加到要滾動的元素的屬性。

我使用它可以在觸摸設備上水平滾動div元素。

Answer 15

您可能對以下內容感興趣：

• jQuery Mobile Carousel （ github ）
• jQuery Mobile

我意識到這不是一個jQuery解決方案，但Sencha Touch框架非常適合構建目標UI。 示例（單擊Carousel側欄鏈接）： http ： //dev.sencha.com/deploy/touch/examples/kitchensink/