jQueryとタッチデバイスをサポートする水平スワイプスライダ?

私はこのような製品のスライダ(赤い領域を参照)をスライダの勢いでスライダにする必要があります。

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

enter image description here

私が望む効果は、この http://manos.malihu.gr/tuts/jquery_thumbnail_scrollerとほぼ同じです。 html (ただし、タッチ対応ではありません)

AppleのiPadアプリ「Trailers」の「Top 25」セクションとまったく同じです

enter image description here

45
FYI:OPが Phill Pafford の答えにコメントしたので、プロジェクトでjquery-mobileタグを使用していないので、jquery-mobileタグを削除しました。
追加された 著者 Smamatti,

15 答え

私の意見では、 iosSlider 素晴らしいです。ほぼすべてのデバイスで動作し、よく文書化されています。それは個人的な使用のために自由ですが、商用サイトのライセンス費用は20ドルです。

また、 touchCarouselRoyalSlider を同じ著者から入手してください。これらの2つはあなたが必要とする全てのものを持っていますが、無料ではありません。また、価格は10-12ドルです

18
追加された

I would also recommend http://cubiq.org/iscroll-4

しかし、あなたがこのプラグインを試していないのであれば

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

それは非常にうまく動作し、デスクトップ上の水平スライドバーにデフォルト設定されています。デスクトップ上ではiscroll-4ほどエレガントではありませんが、タッチデバイス

がんばろう!

16
追加された
iScrollはすでにdSquaredによって言及されており、同じページにある場合はフォーム要素に問題があります
追加された 著者 Jitendra Vyas,
デスクトップ互換性が必要
追加された 著者 Jitendra Vyas,
iScrollはフルスクリーンを使用する場合にのみ動作します
追加された 著者 Jitendra Vyas,
私はiScrollを2つの異なるWebサイトに実装していますが、どちらも画面をフルスクリーンで表示してスクロールする必要はありません。また、デスクトップやタッチデバイスでもうまく機能しますタッチスライダー法
追加された 著者 Thomas,

私の場合は、イベント仕様に基づいて独自のソリューションを実装します。基本的には、スワイプは何ですか - タッチダウン、タッチ移動、イベントのタッチアップの処理です。ここで私のiPhoneのタッチイベントを処理するための自分のlibの抜粋です:

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/ライブラリ/ IO /#ドキュメント/ AppleApplications /リファレンス/ SafariWebContent/HandlingEvents/HandlingEvents.html

14
追加された

あなたはiosSliderを試しましたか?それはあなたが必要とするものを正確に行うことができます。

http://iosscripts.com/iosslider-jquery-horizo​​ntal-スライダ - for iphone-ipad-safari/

10
追加された
@tMagwellあなたは$ 20が多すぎると信じていますか?私はあなただけで今週だけコーヒーでそれ以上を費やしたと確信しています。あなた自身を救うための何かのために、私はそれがいかに "あまりにも"であるかを見落とします。申し訳ありませんが、開発者は私たちの優先順位を時々まっすぐにする必要があると思います。一部の人々がそこでやっている苦労に報いてください。すべてがフリー/オープンソースの理想の下で動くわけではありません。
追加された 著者 Michael Giovanni Pumo,
このプラグインは個人用/非営利目的でのみ無料ですが、シングルドメインで20ドルかかります。 iScrollを使うことをお勧めします。あるいは、CodeCanyonからtouchcarousel/royalsliderを支払ってください。
追加された 著者 Marvin3,

Take a look at iScroll v4 here: http://cubiq.org/iscroll-4

それはjQueryではないかもしれませんが、Desktop MobileやiPadでうまくいきます。私はこれを多くのプロジェクトで使用し、jQueryと組み合わせました。

がんばろう!

4
追加された
フォーム要素では機能しないという問題があります。
追加された 著者 Jitendra Vyas,

This one could fit your need:
http://caroufredsel.frebsite.nl/

タッチサポートのために jQuery Touchwipe を追加する

次に、設定の追加

scroll : {
wipe: true
}
2
追加された
caroufredsel.frebsite.nl サイトがダウンしています。
追加された 著者 Pristine Kallio,
このスレッドを見ている人は、以下のリンクを参照してライブラリを探してください: https://github.com/Codeinwp/carouFredSel-jQuery http://coolcarousels.frebsite.nl/c/p>
追加された 著者 Pristine Kallio,

WooThemesから FlexSlider を見たことがありますか?最近のいくつかのプロジェクトでこれを使って大成功を収めています。タッチも可能なので、マウスベースのブラウザだけでなく、iOSやAndroidのタッチベースのブラウザでも動作します。

2
追加された

私は、私のウェブサイトの1つが、デベロップメントで正確にこれのように思えました。

私は、カルーセルのために StepCarousel を使用しました。これは、私が見つけた唯一のものであるため、別のイメージ同じカルーセルのサイズです

これに加えて、タッチスワイプ効果を追加するために、私は jquery.touchswipe < a>プラグイン。

そして、ステップカルーセルはパネルの剛性を動かすか、

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

You can view the actual render at

this page

あなたを助けることを願っています。

1
追加された
1
追加された
トーマスはすでにそれを言及している
追加された 著者 Jitendra Vyas,
申し訳ありませんが、私は電話でフォームに返信し、すでに言及されたことを認識していません
追加された 著者 Sergio Majluf,

Ive found another: http://swipejs.com/

うまく動作しているようですが、OS X版のChromeでブートストラップと組み合わせて使用​​すると問題が発生します。ブラウザ間の互換性の問題がなければ、あなたは金色です。

1
追加された
私はこれが本当に最高の解決策だと言いたい。
追加された 著者 Xiao Xiao,

あなたは以下に興味があるかもしれません:

I realize this is not a jQuery solution, but Sencha Touch framework is pretty good for building your target UI. Example (click the Carousel sidebar link): http://dev.sencha.com/deploy/touch/examples/kitchensink/

0
追加された
その特定の領域が触れて滑ることができるいくつかの視覚的な手掛かりを追加したいと思います。多分左/右の矢印を追加しますか?ちょっと退屈に聞こえるかもしれませんが、視覚的アフォーダンスがおそらくより良いものになります。
追加された 著者 moey,
0
追加された
両方のリンクが壊れている
追加された 著者 Chris Haines,
いいえ違う
追加された 著者 Jitendra Vyas,

私の経験では、 UIKIT になります.com/docs/slider.html "rel =" nofollow "> uikitスライダーコンポーネントをご覧ください。 例えば、あなたの場合には、このようなことをすることができます。

<div data-uk-slider>
<div class="uk-slider-container">
    
    //width of the elements
  • ...
  • //slide elements ...
</div>
0
追加された

jQueryのスクロールビュー(デモこちら)をご覧ください。 ここは、その実験プロジェクトのgit hubリポジトリです。 htmlを見て、どのファイルをインクルードする必要があるのか​​、スクロール可能にしたい要素にどの属性を追加するのかを確認してください。

私はこれを使ってタッチデバイス上でdiv要素を水平方向にスクロールできるようにしました。

0
追加された
jquery mobileに基づいています。私はプロジェクトに使用していません
追加された 著者 Jitendra Vyas,

Checkout Portfoliojs jQuery plugin: http://portfoliojs.com

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

0
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript