このような商品スライダーを作りたいのですが(赤い部分を見てください)、勢いのあるスワイプスライダーが必要です。
デスクトップ、iPad、モバイルブラウザで動作する必要があります。これを実現するためのjquery/jquery mobileプラグインをご存知ですか?
私が望む効果は、このhttp://manos.malihu.gr/tuts/jquery_thumbnail_scroller.html(しかし、それはタッチ互換性がありません)にほぼ似ています。
また、AppleのiPadアプリ「Trailers"」の「Top 25"」セクションのようなものです;
ここに画像の説明を入力]2。
私の意見では[ iosSlider ][1]は素晴らしいです。 ほとんどすべてのデバイスで動作し、十分に文書化されています。 個人的な使用は無料ですが、商業サイトのライセンスは20ドルです。
また、同じ作者の touchCarousel または RoyalSlider も最適です。 これら2つには、必要なものがすべて揃っていますが、無料ではありません**価格は$ 10〜12です。
[1]:http://iosscripts.com/iosslider-jquery-horizo ntal-slider-for-iphone-ipad-safari/。
しかし、もしあなたがこのプラグインを試してみてください。
http://www.zackgrossbart.com/hackito/touchslider/
デスクトップではiscroll-4ほどエレガントではありませんが、タッチデバイスではとてもうまく動作します。
幸運を祈る!
私があなただったら、イベントの仕様に基づいて独自のソリューションを実装します。 基本的に、スワイプは何ですか-タッチダウン、タッチ移動、タッチアップイベントの処理です。 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');
}
そのコードを使用して「物事を動かす」ことができました。 ただし、移動する代わりに、独自のアルゴリズムを作成できます。 リダイレクトをトリガーして他の場所に誘導するか、その移動を使用して、スワイプが他の場所に配置されている要素を「移動/スワイプ」できます。
したがって、物事がどのように機能するかについての基本を理解し、より複雑なソリューションを作成するのに本当に役立ちます。 これも役立つかもしれません。
これを使用して、ソリューションを作成しました。
これはあなたのニーズに合うかもしれません:< br />。 http://caroufredsel.frebsite.nl/。
タッチサポート用にjquery Touchwipeを追加します。
次に、構成に追加します。
scroll : {
wipe: true
}
WooThemesのFlexSliderを見たことがありますか? 私は最近いくつかのプロジェクトでそれを使用し、大成功を収めました。 タッチも有効になっているため、マウスベースのブラウザと、iOSおよびAndroidのタッチベースのブラウザの両方で動作します。
私は、開発に慣れている私のウェブサイトの1つにこのような考えをしました。
同じカルーセルで異なる画像サイズを受け入れることができるのは私だけだったので、カルーセルにStepCarouselを使用しました。
これに加えて、タッチスワイプエフェクトを追加するために、jquery.touchswipeプラグインを使用しました。
そして、ステップカルーセルはパネルのリグスを動かすか、または私が作ることができるように機能を残します:
$("#slider-actu").touchwipe({
wipeLeft: function() {stepcarousel.stepBy('slider-actu', 3);},
wipeRight: function() {stepcarousel.stepBy('slider-actu', -3);},
min_move_x: 20
});
実際のレンダーはこのページで表示できます。
それがあなたを助けることを願っています。
私の経験では、最適なオープンソースオプションは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>
< / div>。
あなたは以下に興味があるかもしれません:
-[jQuery Mobile Carousel]1。 -jQuery Mobile。
これはjQueryソリューションではないことに気づきましたが、Sencha Touch frameworkはターゲットUIの構築にかなり適しています。例(_Carousel_サイドバーリンクをクリック): http://dev.sencha.com/deploy/touch/examples/kitchensink/。
これは似ていて、jQuery mobile http://www.irinavelychko.com/tutorials/jquery-mobile-gallery を使っている。
そして、そのデモhttp://demo.irinavelychko.com/tuts/jqm-dialog-gallery.html。