web-dev-qa-db-ja.com

jQueryおよびタッチデバイスをサポートする水平スワイプスライダー？

このような製品スライダーを作成する必要があります（赤い領域を参照）。

デスクトップ、iPad、モバイルブラウザで動作するはずです。これを実現するjquery/jqueryモバイルプラグインを知っていますか。

enter image description here

私が望む効果はこれにほぼ似ています http://manos.malihu.gr/tuts/jquery_thumbnail_scroller.html （ただし、タッチ対応ではありません）

「Trailers」という名前のAppleのiPadアプリの「Top 25」セクションとまったく同じ

enter image description here

javascriptjqueryjquery-pluginscss3
46
Jitendra Vyas

私の意見では iosSlider はすごい。ほとんどすべてのデバイスで動作し、十分に文書化されています。個人的な使用は無料ですが、商用サイトのライセンスは20ドルです。

また、素晴らしいオプションは touchCarousel または RoyalSlider 同じ著者から。これら2つには必要なものはすべて揃っていますが、無料ではありません、価格は10-12ドルです

18
Jaime Fernandez

http://cubiq.org/iscroll-4 もお勧めします

ただし、掘り下げていない場合は、このプラグインを試してください

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

それは非常にうまく機能し、デフォルトではデスクトップの水平スライドバーになります-iscroll-4ほどデスクトップではエレガントではありませんが、タッチデバイスでは非常にうまく機能します

幸運を！

16
Thomas

私があなただったら、イベント仕様に基づいて独自のソリューションを実装します。基本的に、スワイプとは、タッチダウン、タッチムーブ、タッチアップイベントの処理です。 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');
}

そのコードを使用して「物事を移動」しました。ただし、移動する代わりに、たとえば他の場所へのリダイレクトをトリガーするか、その移動を使用して、スワイプが他の場所にある要素を「移動/スワイプ」することができます。

そのため、物事の仕組みの基本を理解し、より複雑なソリューションを作成することが本当に役立ちます。これも役立ちます。

私はこれを使用して、ソリューションを作成しました：

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

15
jancha

IosSliderを試しましたか？必要なことを正確に行うことができます。

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

10
Marcus

ここでiScroll v4をご覧ください： http://cubiq.org/iscroll-4

JQueryではないかもしれませんが、デスクトップモバイル、iPadでは非常にうまく機能します。多くのプロジェクトで使用し、jQueryと組み合わせました。

幸運を！

4
dSquared

これはあなたのニーズを満たすことができます：
http://caroufredsel.frebsite.nl/

追加 jquery Touchwipe タッチサポート用

次に、構成に追加します

scroll : {
wipe: true
}
2
Jörg Butzer

WooThemesから FlexSlider を見ましたか？私はこれを最近のいくつかのプロジェクトで使用し、大成功を収めました。タッチ対応でもあるため、マウスベースのブラウザーとiOSおよびAndroidのタッチベースのブラウザーの両方で動作します。

2
DesignerBrent

私は別のものを見つけました： http://swipejs.com/

うまく機能しているようですが、OS XバージョンのChromeでbootstrapと組み合わせたときに問題が発生します。クロスブラウザの完全な互換性が問題にならない場合は、最高です。

1
MrShmee

私は開発中の私のウェブサイトの偶然の1つのためにこのようなsomthinkを作りました。

StepCarousel をカルーセルに使用しました。これは、同じカルーセルで異なる画像サイズを受け入れることができるのは私が見つけた唯一のものだからです。

これに加えて、タッチスワイプ効果を追加するために、 jquery.touchswipe plugin;を使用しました。

そして、ステップカルーセルは、パネルを正しく動かすか、機能を残して、次のようにします：

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

このページ で実際のレンダリングを表示できます

お役に立てば幸いです。

1
Yoann

私はこれを見つけました、それが役立つことを願っています http://www.zackgrossbart.com/hackito/touchslider/

1
Sergio Majluf

JQueryスクロールビューをご覧ください（デモ ここ ）。 ここ は、その実験プロジェクトのgitハブリポジトリです。 htmlを見て、どのファイルを含める必要があるか、スクロール可能にする要素に追加する属性を確認します。

これを使用して、タッチデバイスでdiv要素を水平にスクロールできます。

0
Challe

以下に興味があるかもしれません：

これはjQueryソリューションではないことは承知していますが、 Sencha Touch framework はターゲットUIの構築にかなり適しています。例（Carouselサイドバーリンクをクリック）： http://dev.sencha.com/deploy/touch/examples/kitchensink/

0
moey

私の経験では、最良のオープンソースオプションは [〜＃〜] uikit [〜＃〜] であり、その ikitスライダーコンポーネント です。そして、例えばあなたの場合、このようなことをすることができます。

<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>
0
David Addoteye

これは似ており、jQuery mobileを使用しています http://www.irinavelychko.com/tutorials/jquery-mobile-gallery

そして、そのデモ http://demo.irinavelychko.com/tuts/jqm-dialog-gallery.html

0
DBUK

Checkout Portfoliojs jQueryプラグイン： http://portfoliojs.com

このプラグインは、タッチデバイス、デスクトップ、モバイルブラウザーをサポートしています。また、プリロード機能があります。

0
abhiomkar