17

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

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

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

私が話していることを視覚化するのに問題がある人のために、次の画面は幅 1920px、1800px 1600px および 1400px の幅のブラウザー ウィンドウでどのように見えるかを示しています。これらは、ブラウザの幅全体を占めるサイト全体からの切り抜きです。 ここに画像の説明を入力 ここに画像の説明を入力 ここに画像の説明を入力 ここに画像の説明を入力

4

6 に答える 6

6

以下を使用できます。

于 2013-04-26T22:55:13.557 に答える
1

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

記事とその Web サイトで提供されている例を見て、要件と比較すると、 http://codecanyon.net/item/icarousel/full_screen_preview/2527180またはhttp://www.bkosborne.com/jquery-featureだと思います-カルーセルが最適です。最初のものは、あなたがそれを購入する必要があります。

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

于 2013-05-01T12:32:08.880 に答える
1

私はこれを使用します。http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/ CSS3 アニメーションを使用し、純粋な CSS であるため、@media クエリを使用して適用された CSS を変更できます画面サイズの変化に合わせてスライダーを動かします。

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

于 2013-04-23T19:23:33.370 に答える