インターネット上では、jQuery カルーセルやスライダーを作成するための優れたプラグインが数多く見つかります。 これらを使用すると、追加の効果を備えた動的スクロールを実装できます。

これは、過去数年間の Web デザインで最も人気のあるトレンドの 1 つです。 さらに、使用 既製のライブラリ jQuery プラグインを使用すると、時間を大幅に節約できます。 必要なのは、JavaScript および CSS ファイルへのリンクを提供し、目的の HTML 要素に効果を適用することだけです。

独自の設定や CSS スタイルを設定することもできます。 今日の記事の目的は、カルーセルとスライダーを作成するためのレスポンシブな jQuery プラグインを紹介することです。

Distractful – タッチセンサー式の全画面コンテンツ スライダーを作成するための jQuery プラグイン

レスポンシブな全画面 jQuery コンテンツ カルーセル スライダー (サポート付き) タッチスクリーン。 このプラグインは、GNU GENERAL PUBLIC LICENSE v3 に基づいて配布されます。

Neoslide: シンプルで拡張可能な jQuery カルーセル プラグイン

シンプルで拡張可能な jQuery プラグインにより、あらゆる Web ページで完全にカスタマイズ可能なスライダーを使用できるようになります。

Hslider: 全幅レスポンシブ画像ギャラリー プラグイン

コントロールとカスタム遅延時間を備えたレスポンシブな jQuery カルーセルを使用して画像を表示するための別のプラグイン:

カルーセル 3D: 3D 回転効果を備えた jQuery カルーセル プラグイン

洗練されたスライダー: 全画面対応の jQuery カルーセル

さまざまなタイプのナビゲーションでコンテンツと画像を表示するための、小型で魅力的な jQuery カルーセル ( 画像サムネイル、ページネーション要素、またはタブを含む SVG 矢印):

PaW カルーセル: jQuery を利用したレスポンシブなカルーセル

PaW Carousel (v2) は、画像サムネイルを備えた応答性の高いシンプルな jQuery カルーセルを作成するための小型プラグインです。

カルーセル共有者: ソーシャル ネットワークに再投稿するための jQuery カルーセル

Carousel Sharer は、複数の商品を連続して表示できる jQuery プラグインで、訪問者が Facebook、Twitter、Google+、Pinterest で商品を共有できるようにします。

Simply Carousel: ミニマルなレスポンシブ画像カルーセル

Simply Carousel は、柔軟で応答性の高い画像スライダーとカルーセルを作成できる小型で高速な jQuery プラグインです。

スライド: タッチ対応のレスポンシブな jQuery カルーセルとスライドショー

Slides は、サムネイル、矢印ナビゲーション、カスタム コントロールを使用する機能を備えた、jQuery Web サイト用のレスポンシブなカルーセルを作成するための小型 jQuery プラグインです。 タッチ スクリーンのサポートが実装されました。

jQueryコンテンツカルーセル

自動再生機能、コントロール、さらにはコールバック関数を備えたシンプルな応答性の高い jQuery カルーセル:

Slick: 応答性が高く柔軟な jQuery カルーセル

Slick は、あらゆる HTML 要素で動作する、モバイル向けに最適化された応答性の高いカスタムの jQuery カルーセルとスライダーを作成するための「新しい」プラグインです。

bxSlider: jQuery HTML コンテンツ スライダー

bxSlider は、現在入手可能な最高の jQuery コンテンツ スライダーの 1 つです。 このプラグインはスライドショーの整理に最適です。

CarouFredSel: 柔軟で 強力なプラグイン jQueryカルーセル

jQuery.carouFredSel は、任意の HTML 要素をコンテンツ カルーセルに変えるプラグインです。 1 つ以上の要素を水平方向と垂直方向の両方で同時にスクロールできます。 自動再生を有効にして、スクロールを無限にすることもできます。

jQuery を使用したコンテンツ カルーセルの循環

クリックするたびに新しいコンテンツ ブロックが表示されるカルーセル。 バツ印をクリックするとアクティブなブロックが閉じ、サムネイル表示の開始位置に戻ります。

クラウド カルーセル: Javascript の 3D カルーセル

このカルーセルを使用すると、現実的な視点を作成できます。 多くの jQuery 3D カルーセルは、画像の位置ではなくサイズにのみ遠近効果を適用するため、ページ上の要素の不均衡が生じます。

Elastislide: jQuery を使用した応答性の高いカルーセル

Elastislide は、あらゆる画面サイズに適応する応答性の高い jQuery カルーセルです。 幅が柔軟なコンテナにカルーセルを挿入すると、カルーセル自体が「ゴム状」になります。

jCarousel Lite

このプラグインを使用すると、画像または HTML 要素をスライダーとして表示できるようになります。 重量はわずか 2Kb ですが、同時に独自の設定を使用できます。

3Dカルーセル

シャドウ効果とカーソル位置に反応するアニメーションを備えた画像から 3D jQuery カルーセルを作成します。

JQueryカルーセルプラグイン

このプラグインの設定により、カルーセルに表示される要素の数を決定できます。その後、プラグインはそれを希望の幅に調整します。

jQueryで画像スライダーを回転させる

非対称の画像スライダーに小さな追加が加えられています。画像をスクロールすると、画像がわずかに回転します。 要素のわずかな変位により、スライダーは異常な形状になります。

jQuery機能カルーセル

このプラグインは、お勧めの記事を表示するように設計されています。 ホームページ, しかし、他のコンテンツにも使用できます。 これにより、jQuery コンテンツ カルーセルの残りの部分を非表示にしながら、最大 3 つの画像を同時に表示できます。

jQuery無限カルーセル

これは、カルーセル内に無制限の数の画像とビデオを表示できる jQuery プラグインです。 他のカルーセルとは異なり、Infinite Carousel では、ナビゲーションを使用する必要がなく、要素が無限ループで表示されます。

jQuery Liquid Carousel プラグイン

Liquid Carousel は、流動的なデザインを作成するために設計されたプラグインです。 jQuery 応答カルーセル コンテナーのサイズが変更されるたびに、表示される要素の数が新しい幅に調整されます。

JQuery MSカルーセル

/* ここからカルーセルが始まります。 Block.carousel-wrapper は相対的に配置され、wrapper.carousel-item は絶対的に配置されます。 。 */ .carousel-wrapper(position:relative; /* 絶対に配置されたボックスは、親から高さと幅を取得します。デフォルトでボックスを透明にしました。リンクをクリックするとスムーズに表示されます。arrow-prev および .arrow- next. * / .carousel-item(position:absolute;top:0;bottom:0;left:0;right:0;padding:25px50px;opacity:0;transition:all0.5sease-in-out; /* 気づきました左側と右側に 50 ピクセルのパディングを配置すると、それぞれのリンクの幅が 50 ピクセルになります。 背景画像 リンクが矢印のように見えるようにします。 リンクが単なる透明な長方形にならないように、リンクの URL を元の URL に変更していることを確認してください。 */ .arrow( 位置:絶対; トップ:0; 表示:ブロック; 幅:50px; 高さ:100%; -webkit-tap-highlight-color:rgba(0,0,0,0); 背景:url( "/carousel-arrow-dark.png")50%50%/20pxno-repeat; /* 矢印を左に戻しましょう */ &.arrow-prev( left:0; ) /* 2 つ目は、右の矢印は同じ画像で、180 度回転させます */ &.arrow-next( right:0; -webkit-transform:rotate(180deg); transform:rotate(180deg); ) ) /* とても気に入っています暗い背景に対してカルーセル スライドがどのように見えるかが気に入っています。block.carousel-item のクラスが「ライト」の場合は、そのテキストを白に変更し、灰色の矢印の代わりに白い矢印を使用します。 矢印画像へのパスが正しいことを再確認してください */ &.light( color:white; .arrow(background:url("/carousel-arrow-light.png")50%50%/20pxno-repeat; ) ) /* 画面サイズが小さいデバイスの矢印のサイズを変更するメディア クエリを作成しましょう。*/ @media(max-width:480px)( .arrow,&.light.arrow(background-size:10px; background -position:10px50% ; ) ) /* 表示するリンクターゲットを設定します: none; こうすることで、矢印をクリックするたびにブラウザがカルーセルの一番上にジャンプし続けるという問題を回避できます。 このプロパティは、ID が「target-item」で始まるすべての要素に対して有効です。 */ ( display:none; ) /* 上では、すべてのカルーセル スライドを透明にしました。つまり、カルーセルが読み込まれると、代わりに大きな空のボックスが表示されます。 最初のスライドの透明度の値を 1 に変更して表示しましょう。 また、Z インデックスを 2 に設定し、他のスライドよりも高い位置に配置します。 */ .item-1( z-index:2; opacity:1; ) /* ただし、最初のスライドの不透明度値が常に opacity: 1; になるようにする必要はありません。 それ以外の場合は、他のスライドを回転させながら、このスライドを進めていく必要があります。 */ *:target~.item-1( opacity:0; ) /* ..ただし、#target-item-1 にフォーカスがあり、最初のスライドを表示したい場合は、~ アイコンを使用してそれを選択し、透明度を再び 1:-) */ #target-item-1:target~.item-1( opacity:1; ) /* 他の target-item-# にフォーカスがある場合は、~ セレクターを使用してそれらを選択し、スムーズに表示します3. ここで、スパンが 3 つ以上ある場合は、ターゲット項目識別子を使用して追加のスパンを追加できます。 たぶん一度に10個追加します。 。 */ #target-item-2:target~.item-2,#target-item-3:target~.item-3( z-index:3; opacity:1; ) )

の 1 つ 効果的な方法ウェブサイトのページでユーザーの注目を集めるのは、動くアニメーションの作成です。 アニメーション要素は、ユーザーに製品についてより明確に伝え、表示するのに役立ちます。 最近ポップアップ パネルは非常に人気があり、画像をスクロールしたりクリックしたときに表示される他の多くの効果も同様です。 これらは、スライダー、カルーセル、ポップアップ パネルとも呼ばれます。 この記事では、スムーズな自動スクロール効果を備えたアダプティブ カルーセル スライダーの作成について説明します。

現在、インターネット上には既製のソリューションへのリンクを含むレビューが数百件ありますが、そのほとんどには、スライダーのパフォーマンスを大幅に低下させ、サイト全体の読み込み速度を低下させる未使用の機能が多数含まれています。 プロの Web 開発者は、常に柔軟でカスタマイズ可能な Web サイトを作成するよう努めてきました。 ソフトウェア製品、追加のライブラリやプラグインの導入しきい値が低くなります。 そのため、スクリプトでは 最小要件このようなスライダーを整理します。 この機能を使用すると、切り替え間隔、速度、および特定のスライドの選択を設定できます。 以下は、スライダー自体の動作を制御するいくつかの変数です。

時間リスト- スライド切り替え速度

タイムビュー- ショータイム

ラジオだけど- スライドの下にあるボタンで簡単にナビゲーションできます。 デフォルト値は true ですが、false を使用するとボタンが表示されなくなります。

さあ、始めましょう！ ファイルを作成して開いてみましょう インデックス.htm

ご覧のとおり、提示されたコードには複雑なものは何もありません。 スライダーラップ全体の位置を決定し、スライダーを画面の中央に合わせます。 パラメータ アクティブスライド画像の長さに応じて画像のサイズと高さを設定します。 そして スライダーアクティブな画像のみを表示します。

ファイルを作成して開いてみましょう スタイル.cssそこに必要なマークアップを書きます。

@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto"); body ( color: #4f4f5a; font-family: "Roboto"、sans-serif; font-size: 16px; パディング: 0; マージン: 0; ) #slider-wrap( max-width:800px; margin: 0 auto; margin-top: 80px; ) #active-slide (幅: 100%; 表示: テーブル; 位置: 相対; オーバーフロー: 非表示; -webkit-user-select: なし; -moz-user-select: なし; -ms-ユーザー選択: なし; -o-ユーザー選択: なし; #slider( 位置: 相対; 幅: calc(100% * 4); 上: 0; 左: 0; マージン: 0パディング: 0; -webkit-transition: 1s; -webkit-transition-timing-function: イーズイン-アウト; トランジション-タイミング関数: イーズイン-アウト ) .slide( width: calc(100%/4) ); リストスタイル: なし; 表示: インライン; フロート: 左; ) .slide img ( width: 100%; ) .Radio-But( margin-top:10px; text-align:center; ) Ctrl-select ( マージン:2px; 表示:インラインブロック; 幅:16px; 高さ:16px; オーバーフロー:非表示; テキストインデント:-9999px; 背景:url(radioBg.png) 中央下 繰り返しなし; ) .Radio-But .ctrl-select:hover ( カーソル:ポインター; 背景位置:中央中央; ) .Radio-But .ctrl-select.active ( 背景位置:中央上部; ) #prewbutton, #nextbutton ( 表示:ブロック; 高さ: 100%; オーバーフロー: 非表示; 背景: url("arrowBg.png") 左中央の不透明度: 0.5; !重要; ) nextbutton ( right:10px; background:url(arrowBg.png) 右中央 no-repeat; ) #prewbutton:hover, # nextbutton:hover ( opacity:1; )

スタイルプロパティで スライダーラップ書き留める 幅– 画像の最大長。

スタイルプロパティで #slider (幅: calc(100% * 4); )そして .slide (幅: calc(100%/4); )スライダー内の画像の数を示します。 この例では、それらは 4 つあります。

前方/後方矢印がスライダーの表示を妨げる​​場合は、スライダーを非表示にし、上にマウスを置くと表示されるようにすることができます。 これを行うには、パラメータで 準備するけどそして 次へしかし、不透明度プロパティを 0 に設定します。

ファイルを作成して開いてみましょう スライダー.js、これにはスライダー コードが含まれます。 jQuery ライブラリを忘れずに含めてください。

$(document).ready(function () ( var timeList = 700; var TimeView = 5000; var RadioBut = true; var slideNum = 1; var slideTime; slideCount = $("#slider .slide").length; var animSlide = function(arrow)( clearTimeout(slideTime); if(arrow == "next")( if(slideNum == slideCount) ( slideNum=1; ) else(slideNum++) translationWidth = -$("#active-slide") .width() * (slideNum - 1); $("#slider").css(("transform": "translate(" + translationWidth + "px, 0)")); else if(arrow == " prew ") ( if(slideNum == 1) ( slideNum=slideCount; ) else(slideNum-=1) translationWidth = -$("#active-slide").width() * (slideNum - 1); $(" # slider").css(("transform": "translate(" + translationWidth + "px, 0)")); )else( slideNum = arrow; translationWidth = -$("#active-slide").width( ) * (slideNum -1); $("#slider").css(("transform": "translate(" + translationWidth + "px, 0)")); $(".ctrl-select.active" ) RemoveClass("アクティブ"); $(".ctrl-select").eq(slideNum - 1).addClass("アクティブ" ) if(RadioBut)( var $linkArrow = $("<>").prependTo("#active-slide"); $("#nextbutton").click(function())( animSlide("next"); return false; )) $("#prewbutton").click( function ()( animSlide("prew"); return false; )) ) var adderSpan = ""; $(".slide").each(function(index) ( adderSpan += " " + インデックス + ""; }); $("

").appendTo("#slider-wrap"); $(".ctrl-select:first").addClass("active"); $(".ctrl-select").click(function())( var goToNum = parseFloat($(this).text()); animSlide(goToNum + 1 )); var stop = false; var rotator = function())( if(!pause)(slideTime = setTimeout(function()) animSlide) ("next")), TimeView);) ) $("#slider-wrap").hover(function())(clearTimeout(slideTime); 一時停止 = true;), function())(一時停止 = false ; rotator() ; )); var クリック = false; $(".slide").mousedown(e)(click = true; prevX = e.clientX; )); ( function() ( click = false; )); $(document).mouseup(function())( click = false; )); $(".slide").mousemove(function(e)( if(clicking = = true ) ( if(e.clientX< prevX) { animSlide("next"); clearTimeout(slideTime); } if(e.clientX >prevX) ( animSlide("prew"); clearTimeout(slideTime); ) クリック = false;

))); $(".slide").hover().css("カーソル", "ポインター");ローテーター(); ));

関数

1. jQueryカルーセル「clickCarousel」

スクロールするニュースアナウンスをブロックします。 左/右矢印を使用してブロックをスクロールします。 アーカイブには、ライトとダークの 2 つのスタイルのカルーセルが含まれています。

1. jQueryカルーセル、プラグイン「carouFredSel」

jQuery のすっきりとした新鮮な画像カルーセル。

4. jQueryプラグイン：カルーセル「Elastislide」

5.TinyCarouselプラグイン

jQuery を使用した画像カルーセル形式の優れたコンテンツ スライダー。 デモ ページでは、このカルーセルをサイトに接続する方法が説明されています。

プラグイン「Slider Kit」、 さまざまな方法でスクロール。

7. JavaScriptカルーセル

8. jQueryプラグイン「グリッドナビゲーションエフェクト」

画像サムネイル間のオリジナルナビゲーション。 デモ ページの右側でエフェクトを表示するには、[上へ] ボタンと [下へ] ボタンをクリックします。 この jQuery ソリューションは、サムネイルのホバー効果やマウス ホイールによるスクロールも提供します。

9. 簡単カルーセル

10. 「Easy Paginate」ブロックで作られたカルーセル

jQueryプラグイン「Easy Paginate」。 各長方形のブロックは通常の li リスト項目を表します。項目が 3 つ以上ある場合、それらをすべて表示するには、スライダーのようなナビゲーション (「進む」矢印と「戻る」矢印を使用する、およびナビゲーション ボタンを使用する) を使用する必要があります。底）。

11. 垂直ティッカーローテーター

jQuery の垂直ローテーター: ページ上のコンテンツの自動スクロール。 ナビゲーション ボタンが提供されるほか、回転を停止して再開する機能も提供されます。 マウスカーソルを乗せると動きが止まります。 HTML マークアップ レベルでは、スクロール ブロックは通常の li リスト項目によって表されます。

12. JavaScript CSS スクロール領域

JavaScript ソリューション「TinyScroller」を使用して、DIV コンテナーに配置されるスクロール領域を作成します。

13. jQueryプラグイン「Smooth Div Scroll」

特定領域のコンテンツの横スクロールを実装するプラグイン。 領域の左端または右端にマウスを置くと、スクロールが始まります。

コンテンツ スライド間のナビゲーションは、矢印を使用するかサムネイルをクリックすることで実行できます。 下部には「表示」ボタンがあり、サムネイルやサムネイルの表示/非表示を切り替えることができます。 完全な説明スライド。

15. コンテンツローテータ「Circular Content Carousel」

17. スクローラー

カーソルを置くと表示されるスクローラー付きのブロック。 スクロール バーまたはマウス ホイールを使用してコンテンツをスクロールできます。

この jQuery ソリューションは、Apple Web サイトでの同様の効果からインスピレーションを得て作成されました。 この企業の開発者は、世界中のウェブマスターにインスピレーションを与える興味深いソリューションを常に見つけてきました。 プラグインをデモンストレーションするには、リストからカテゴリを選択します。

19. すごいスライダー

スライダーは自動生成されます。 製品名、説明、リンク、画像アドレスを含むデータは、slider.db.txt ファイルから取得されます。 使用されるテクノロジー: CSS、PHP、jQuery。

20. jQueryを使用したブロックの回転

ブロックの回転効果を表示するには、デモ ページ上の小さな四角形の 1 つをクリックします。

たとえば、コンテンツ スクロール プラグインを使用すると、Web サイトに最新のニュースを表示したり、Twitter のチラシを表示したりできます。

22. ダイナミックブロック「カスタマーレビュー」

ブロックコンテンツの自動回転。 使用されるテクノロジー: PHP、XML、CSS、jQuery。

このプラグインは、リスト項目 (ul li) を jQuery カルーセル要素に変換します。

26. JavaScriptカルーセル「ImageFlow」

マウス ホイールを使用すると、画像を簡単にスクロールできます。

27. コンテンツのスクロール

サイトの最新情報やニュースをコンパクトにまとめたブロックです。 左側の列には、最新ニュースの短いお知らせのページ分割されたリストが表示されます。 それらのいずれかを選択すると、右側の列に複数が表示されます 詳しい説明そして読むためのリンク 全文出版物。 jQueryを使用して実装されています。

リンクのある画像はスクロールされ、マウスを置くとスクロールが停止し、ナビゲーション バーが表示されます。 画像の上にマウスを置くと、コントロール ボタンの間にその名前も表示されます。 ページ上ではとても素敵に見えます

33. コンテンツのスクロール、Mootools プラグイン「Scrollbar」

スクロールは、スクロール バーとマウス ホイールの両方を使用して行われます。

現在、スライダー (カルーセル) は、ビジネス Web サイト、ポートフォリオ Web サイト、またはその他のリソースに必要な機能です。 全画面画像スライダーと同様に、水平カルーセル スライダーはあらゆる Web デザインによく適合します。

場合によっては、スライダーがサイト ページの 3 分の 1 を占める必要があります。 ここでは、カルーセル スライダーがトランジション効果と応答性の高いレイアウトとともに使用されています。 電子商取引サイトでは、カルーセル スライダーを使用して、個々の投稿またはページに複数の写真を表示します。 スライダーコードは自由に使用でき、必要に応じて変更できます。

JQuery を HTML5 および CSS3 と組み合わせて使用​​すると、ページをより興味深いものにし、ユニークな効果を与え、サイトの特定の領域に訪問者の注意を引くことができます。

Slick – 最新のカルーセル スライダー プラグイン

Slick は無料で利用できる jquery プラグインであり、その開発者は、そのソリューションがスライダーのすべての要件を満たすと主張しています。 アダプティブ スライダー - カルーセルは、モバイル デバイスの場合は「タイル」モードで、デスクトップ バージョンの場合は「ドラッグ アンド ドロップ」モードで動作します。

「フェード」トランジション効果、興味深い「センターモード」機能、自動スクロールによる画像の遅延読み込みが含まれています。 更新された機能には、スライドとスライド フィルターの追加が含まれます。 すべては、要件に従ってプラグインを構成するためです。

デモモード | ダウンロード

Owl Carousel 2.0 – jQuery – タッチデバイスで使用するプラグイン

このプラグインには、初心者と経験豊富な開発者の両方に適した大規模な機能セットが備わっています。 これはカルーセル スライダーの更新バージョンです。 彼の前任者も同じ名前でした。

スライダーには、全体的な機能を向上させるためのプラグインがいくつか組み込まれています。 アニメーション、ビデオ再生、スライダーの自動再生、遅延読み込み、自動高さ調整 – これらが Owl Carousel 2.0 の主な機能です。

プラグインをより便利に使用できるように、ドラッグ アンド ドロップのサポートが含まれています。 モバイルデバイス.
このプラグインは、モバイル デバイスの小さな画面でも大きな画像を表示するのに最適です。

例 | ダウンロード

jQuery プラグイン Silver Track

かなり小さいですが、機能が豊富な jquery プラグインで、ページにスライダーを配置できるようにします。カルーセルは、コアが小さく、サイト リソースをあまり消費しません。 このプラグインを使用すると、アニメーション付きの垂直および水平スライダーを表示したり、ギャラリーから画像のセットを作成したりできます。

例 | ダウンロード

AnoSlide – 超コンパクトな応答性の高い jQuery スライダー

超コンパクトな jQuery スライダー - カルーセル。通常のスライダーよりもはるかに優れた機能を備えています。 それには、 プレビュー 1 つの画像に、タイトルに基づいてカルーセルとスライダーの形式で複数の画像を表示します。

例 | ダウンロード

フクロウ カルーセル – Jquery スライダー – カルーセル

Owl carousel は、タッチ スクリーンとドラッグ アンド ドロップ技術をサポートするスライダーで、HTML コードに簡単に統合できます。 このプラグインは、特別に準備されたマークアップなしで美しいカルーセルを作成できる最高のスライダーの 1 つです。

例 | ダウンロード

3D ギャラリー - カルーセル

CSS スタイルと小さな Javascript コードに基づいた 3D トランジションを使用します。

例 | ダウンロード

TweenMax.js と jQuery を使用した 3D カルーセル

壮大な 3D カルーセル。 先ほどいくつかの問題を発見したので、これはまだベータ版のようです。 独自のスライダーをテストして作成することに興味がある場合、このカルーセルは非常に役立ちます。

例 | ダウンロード

ブートストラップを使用したカルーセル

レスポンシブ スライダー - 新しい Web サイト専用のブートストラップ テクノロジーを使用したカルーセル。

例 | ダウンロード

Bootstrap フレームワークに基づく移動ボックス カルーセル スライダー

ポートフォリオやビジネス Web サイトで最も人気があります。 このタイプのスライダー (カルーセル) は、あらゆる種類のサイトでよく見られます。

例 | ダウンロード

小さなサークルスライダー

この小さなサイズのスライダーは、あらゆる画面解像度のデバイスで動作する準備ができています。 スライダーは、円形モードとカルーセル モードの両方で動作します。 小さな円は、このタイプの他のスライダーの代替として表示されます。 組み込みのサポートが利用可能 オペレーティングシステム iOSとアンドロイド。

円形モードでは、スライダーは非常に興味深いものに見えます。 ドラッグ アンド ドロップ方法と自動スライド スクロール システムの優れたサポート。

例 | ダウンロード

おやゆび姫コンテンツスライダー

強力で適応性のあるカルーセル スライダーは、最新の Web サイトに最適です。 どのデバイスでも正しく動作します。 水平モードと垂直モードがあります。 そのサイズはわずか 1 KB に最小化されています。 超コンパクトなプラグインは、スムーズなトランジションにも優れています。

例 | ダウンロード

すごい – スライダー – カルーセル

50 種類以上のエフェクトが含まれており、Web サイトのオリジナル スライダーの作成に役立ちます。

例 | ダウンロード

レスポンシブな jQuery コンテンツ スライダー bxSlider

ブラウザ ウィンドウのサイズを変更して、スライダーがどのように適応するかを確認します。 Bxslider には 50 を超えるカスタマイズ オプションが付属しており、さまざまなトランジション効果を備えた機能を紹介します。

例 | ダウンロード

jカルーセル

jCarousel は、画像の表示を整理するのに役立つ jQuery プラグインです。 例に示されているベースからカスタム画像カルーセルを簡単に作成できます。 スライダーは適応性があり、モバイル プラットフォームで動作するように最適化されています。

例 | ダウンロード

スクロールボックス - jQuery プラグイン

Scrollbox は、スライダー (カルーセルまたはテキスト クロール) を作成するためのコンパクトなプラグインです。 主な機能には、マウスオーバーで一時停止する垂直および水平スクロール効果が含まれます。

例 | ダウンロード

dbpasカルーセル

シンプルなカルーセル スライダー。 高速なプラグインが必要な場合は、これが 100% 適しています。 スライダーの動作に必要な基本機能のみが付属しています。

例 | ダウンロード

Flexisel: レスポンシブ JQuery スライダー プラグイン - カルーセル

Flexisel の作成者は、昔ながらの jCarousel プラグインに触発され、モバイル デバイスやタブレット デバイスでスライダーが正しく動作することを目的としてそのコピーを作成しました。

Flexisel のレスポンシブ レイアウトは、モバイル デバイス上で実行する場合、ブラウザ ウィンドウ サイズのレイアウトとは異なります。 Flexisel は、低解像度と高解像度の両方の画面で動作するように完全に適合しています。

例 | ダウンロード

Elastislide – アダプティブ スライダー – カルーセル

Elastislide はデバイスの画面のサイズに完全に適応します。 特定の解像度で表示する画像の最小数を設定できます。 固定ラッパーと垂直スクロール効果を使用して、画像ギャラリーを備えたカルーセル スライダーとして機能します。

例 | ダウンロード

フレックススライダー 2

Woothemes のフリーウェア スライダー。 これは当然のことながら、最高のアダプティブ スライダーの 1 つと考えられています。 プラグインにはいくつかのテンプレートが含まれており、初心者ユーザーと専門家の両方にとって役立ちます。

例 | ダウンロード

素晴らしいカルーセル

Amazing Carousel – jQuery を使用したレスポンシブな画像スライダー。 WordPress、Drupal、Joomla などの多くのコンテンツ管理システムをサポートします。 Android、IOS、デスクトップ オペレーティング システムも互換性の問題なくサポートします。 内蔵の素晴らしいカルーセル テンプレートを使用すると、垂直、水平、円形モードでスライダーを使用できます。

例 | ダウンロード