web-dev-qa-db-ja.com

jQueryレスポンシブカルーセル/スライダーをお勧めします

タッチサポート付きの「レスポンシブカルーセル」を作成できる、すぐに使えるjQueryプラグイン(無料または有料)を探しています。

現在の画像をサイトの中央に表示し(画像の幅と高さを定義、すべての画像で固定、画像を垂直方向に中央揃え、カルーセル/スライダーの高さはブラウザの幅によって変化しない)、次に部分的または完全に表示する方法右が画像、左が前の画像。ブラウザが大きくなると、それらの「切り抜かれた」画像がどんどん表示されます。ブラウザが十分に大きい場合は、3枚の写真が完全に表示され、次の写真は右に、前の写真は左に切り取られます。画像はフィルムストリップのように見え、1つの画像が中央にあり、ブラウザウィンドウが許す限り、他​​の多くの画像が左右に表示されます。

この画像は、このカルーセルがさまざまなブラウザ幅でどのように動作するかを示しています...最も暗いボックスは水平に配置された写真であり、それらの外側の明るいボックスは異なるブラウザウィンドウの高さを示しています。 enter image description here

私が話していることを視覚化するのに問題がある人のために、次の画面はそれがどのように見えるべきかを示しています幅ブラウザウィンドウ幅1920px、1800px 1600px、1400px。これらは、ブラウザの幅全体を埋め尽くすサイト全体からの切り抜きです。 enter image description hereenter image description hereenter image description hereenter image description here

16
Marcin Bobowski

私はここ数日、非常によく似たものを探していました。これまでの私のお気に入り

ロイヤルスライダー

http://dimsemenov.com/plugins/royal-slider/visible-nearby/

これはすべてを手に入れました。タッチサポート、高度にカスタマイズ可能なレスポンシブレイアウト..すぐに実行できるはずです。値札は12ドルになります。

carouFredSel

また、非常に強力なタッチがサポートされていますが、ロイヤルスライダーほど気楽でエレガントではありませんが、無料です。プラグインに基づいたさまざまなカルーセルを備えた本当に素敵なショーケースページがあります。

これは興味深いかもしれません.. http://coolcarousels.frebsite.nl/c/2/

9
iococoi

次を使用できます。

6
hafid2com

その場合、Wowsliderが役立ちます。 http://wowslider.com/jquery-slider-carousel-mac-stack-demo.html で1回確認してください。

同様の解決策は http://www.smoothdivscroll.com/#quickdemo でも利用できます。

1
Ayush

これを使います。 http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/ css3アニメーションを使用し、純粋なcssであるため@を使用できます。画面サイズの変更に応じて、スライダーに適用されているcssを変更するメディアクエリ。

この定型文を見ると、メディアクエリの詳細を確認できます http://www.getskeleton.com/

1
btm1

最近、自分に似たものを検索して、次の記事を見つけました: http://www.tripwiremagazine.com/2012/12/jquery-carousel.html

記事とそのWebサイトで提供されている例を調べて、要件と比較すると、 http://codecanyon.net/item/icarousel/full_screen_preview/252718 または http: //www.bkosborne.com/jquery-feature-carousel が最適です。最初のものはあなたがそれをあなたが買うことを要求するでしょう。

最初の記事を確認する必要があります。私が何かを見落としているか、あなたがもっと適したものを見つけた可能性があります...

1

スワイプはかなりまともなように見え、反応が良いです。また、非常にスムーズで、携帯電話やタブレットでのスワイプをサポートしています。

http://swipejs.com/

Royal Sliderほどフル機能ではないかもしれませんが、無料です。

0
Simon East