矢印とナビゲーションを備えた Jquery 垂直スライダー。 レスポンシブスライダーの選択

> >

スライダーのスタイル

.slider-box( width : 320px ; height : 210px ; overflow : hidden ; ) .slider( position : relative ; width : 10000px ; height : 210px ; ) .slider img( float : left ; z-index : 0 ; )

container.slider-box は、スライダーのサイズを指定します。 overflow:hidden プロパティは、要素内のスコープ内にないすべての要素を非表示にします。

container.slider は大きな幅に設定されています。 これは、すべてのスライドをそれに合わせるために必要です。

スライドは float:left プロパティを使用して整列されます。

スライダー ブロックの概略レイアウトを以下に示します。

脚本

スライドの移動は、container.slider の margin-left プロパティをスムーズに変更することで行われます。

$(function () ( var width= $(".slider-box" ) .width () ; // スライダーの幅。間隔 = 4000 ; // スライドを切り替える間隔。$(".slider img:last" ) .clone () .prependTo (".slider" ) ; // 最後のスライドのコピーが最初に配置されます。$() .eq (1) .clone () .appendTo (".slider" ) ; // 最初のスライドのコピーが最後に配置されます。 // Container.slider は 1 スライドの幅だけ左にシフトされます。 setInterval("animation()" , interval) ; // animation() 関数を実行して、スライド トランジションを実行します。) ) ; function animation() ( var margin = parseInt($(".slider" ) .css ("marginLeft" ) ) ; // 現在のブロック offset.slider width= $(".slider-box" ).width() , // スライダーの幅。スライダー量 = $(".slider") .children () .length ; // スライダーのスライド数。 if (margin!= (- width* (slidersAmount- 1 ) ) ) // 現在のスライドが最後のスライドでない場合、(マージン=マージン幅; // 次に、margin の値をスライドの幅だけ減らします。） それ以外 （ // 最後のスライドが表示されている場合、$(".slider" ) .css("margin-left" , -width) ; // その後、block.slider は最初の位置に戻り、 margin=- 幅* 2 ; ) $(".slider") .animate (( marginLeft: margin) , 1000 ) ; // Block.slider は 1 スライド左に移動します。 } ;

その結果、無限の自動スクロールを備えたシンプルなスライダーができあがります。

この記事では、CSS Flexbox と CSS 変換を使用して、サイトの適応スライダーを非常に簡単に作成する方法を分析します。

ソースコードとスライダーのデモ

ChiefSlider と呼ばれるスライダー プロジェクトは、GitHub でホストされています。 このリンクから移動できます。

アクティブなスライドが 1 つあるスライダー (ループなし):

3 つのアクティブなスライドを含むスライダー (ループなし):

スライダーを使用して記事を回転させる方法を示す例:

チーフスライダーのメリット

このスライダーの主な利点をリストします。

• まず、彼 要素 (アイテム) のクローンを作成しませんたとえば、プラグインで実装されているように、ループを整理する フクロウ回転木馬と 滑らかな;
• 第二に、ライブラリに依存しません jQuery; これにより、追加の要件がなくなるだけでなく、より簡単になります。
• 第三に、それは実際には ドキュメントのDOMに変更を加えません; スライダー要素の CSS 変換値を追加または変更するだけです。
• 第四に、それは 最小限の機能セット; タスクに応じて追加機能を追加できます。
• 第五に、それは適応的です。 どのサイトでも使用できます。 スライダーの適応性は CSS を使用して構成されます。
• 6番目に、CSSを使用してアクティブな要素の数を構成します。 これは、1 つのアクティブなスライドまたは任意の数のアクティブなスライドを含むカルーセルを作成するために使用できることを意味します。

チーフスライダーのインストール

スライダーの取り付けは、次の 3 つの手順で行います。

• ページまたはページに接続された CSS ファイルに、chiefSlider の CSS を追加します。
• スライダーの HTML コードをページの必要な場所に配置します。
• ページまたはページに接続された js ファイルに JavaScript コードを挿入します。

CSS と JavaScript コードを最小限に抑えることが望ましいです。これにより、ページの読み込みが速くなります。

シンプルな Web サイト スライダーの設計方法 (ループなし)

スライダーの作成 チーフスライダー HTML コード、CSS、および JavaScript (jQuery を使用しない) の作成で構成されます。

スライダー HTML コード チーフスライダー:

ご覧のとおり、スライダーの HTML アーキテクチャは非常に単純です。 それは、スライダー クラスを持つメイン ブロックから始まります。 このブロックは 3 つの要素で構成されています。

最初の要素は .slider__wrapper です。 .slider__item 要素 (スライド) のラッパーとして機能します。

他の 2 つの要素 (.slider__control) は、ボタンを視覚的に表します。 それらは、スライドをナビゲートするために使用されます。 前の要素と次の要素に移動します。

ChiefSlider の css コード:

/* 基本的なスタイル */ .slider ( position: relative; overflow: hidden; ) .slider__wrapper ( display: flex; transition: transform 0.6s ease; /* 0.6 秒単位のスライド遷移時間 */ ) .slider__item ( flex: 0 0 50%; /* アクティブなスライドの数を定義します (この場合は 2 */ max-width: 50%; /* アクティブなスライドの数を定義します (この場合は 2 */ ) /* 戻るボタンと進むボタンのスタイル* / .slider__control ( position: absolute; display: none; top: 50%; transform: translateY(-50%); align-items: center; justify-content: center; text-align: center; width: 40px; / * ボタンの幅 */ 高さ: 50px; /* ボタンの高さ */ opacity: .5; /* 透明度 */ background: #000; /* 背景色 */ ) .slider__control_show ( display: flex; ) .slider__control:hover, .slider__control:focus ( text-decoration: none; Outline: 0; opacity: .9; /* transparent */ ) .slider__control_left ( left: 0; ) .slider__control_right ( right: 0; ) .slider__control::before ( content: " "; 表示: インラインブロック; 幅: 20px /* アイコン (矢印) の幅 */ 高さ: 20px; /* アイコン (矢印) の高さ */ background: 透明 繰り返しなし センター センター; 背景サイズ: 100% 100% ) .slider__control_left::before ( background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23fff) " viewBox="0 0 8 8"%3E%3Cpath d="M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z"/%3E%3C/svg%3E "); ) .slider__control_right::before ( background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" fill= "%23fff" viewBox="0 0 8 8"%3E%3Cpath d="M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z"/%3E%3C/svg%3E "); )

ご覧のとおり、スライダーの CSS コードも あまり複雑ではない. スライダーの外観をカスタマイズできる主な定義は、コメント付きで提供されています。

を定義する CSS コード アクティブな要素の数:

/* アクティブなスライドの数を定義します (この場合は 2) */ flex: 0 0 50%; 最大幅: 50%

このコードは、スライダーのアクティブな要素の数を 2 に設定します。

たとえば、スライダーに 1 つのアクティブな要素、これらの定義を次のように変更する必要があります。

/* アクティブなスライドの数を定義します (この場合は 1) */ flex: 0 0 100%; 最大幅: 100%

創造 適応スライダーメディアクエリを通じて行われます。

たとえば、小さな画面のデバイスではアクティブなスライドが 1 つ、大きなデバイスでは 4 つのスライダーがあります。

Slider__item ( フレックス: 0 0 100%; 最大幅: 100%; ) @media (最小幅: 980px) ( .slider__item ( フレックス: 0 0 25%; 最大幅: 25%; ) )

ChiefSlider の JavaScript コード:

"厳密に使用"; var multiItemSlider = (function () ( return function (selector) ( var _mainElement = document.querySelector(selector), // メイン要素をブロック _sliderWrapper = _mainElement.querySelector(".slider__wrapper"), // .slider-item _sliderItems のラッパー= _mainElement.querySelectorAll(".slider__item"), // 要素 (.slider-item) _sliderControls = _mainElement.querySelectorAll(".slider__control"), // コントロール _sliderControlLeft = _mainElement.querySelector(".slider__control_left"), // ボタン"LEFT" _sliderControlRight = _mainElement.querySelector(".slider__control_right"), // ボタン "RIGHT" _wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width), // ラッパー幅 _itemWidth = parseFloat(getComputedStyle(_sliderItems).width), / / 1 つの要素の幅 _positionLeftItem = 0, // 左アクティブ要素の位置 _transform = 0, // 変換値.slider_wrapper _step = _itemWidth / _wrapperWidth * 100, // ステップ サイズ (変換用) _items = ; // の配列elements // _items 配列を埋める _sliderItems.forEach(function (item, index) ( _items.push(( item: item, position: index, transform: 0 )); )); var position = ( getMin: 0, getMax: _items.length - 1, ) var _transformItem = function (direction) ( if (direction === "right") ( if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) >= position) .getMax) ( return; ) if (!_sliderControlLeft.classList.contains("slider__control_show")) ( _sliderControlLeft.classList.add("slider__control_show"); ) if (_sliderControlRight.classList.contains("slider__control_show") && (_positionLeftItem + _wrapperWidth / _itemWidth) >= position.getMax) ( _sliderControlRight.classList.remove("slider__control_show"); ) _positionLeftItem++; _transform -= _step; ) if (方向 === "左") ( if (_positionLeftItem<= position.getMin) { return; } if (!_sliderControlRight.classList.contains("slider__control_show")) { _sliderControlRight.classList.add("slider__control_show"); } if (_sliderControlLeft.classList.contains("slider__control_show") && _positionLeftItem - 1 <= position.getMin) { _sliderControlLeft.classList.remove("slider__control_show"); } _positionLeftItem--; _transform += _step; } _sliderWrapper.style.transform = "translateX(" + _transform + "%)"; } // обработчик события click для кнопок "назад" и "вперед" var _controlClick = function (e) { if (e.target.classList.contains("slider__control")) { e.preventDefault(); var direction = e.target.classList.contains("slider__control_right") ? "right" : "left"; _transformItem(direction); } }; var _setUpListeners = function () { // добавление к кнопкам "назад" и "вперед" обработчика _controlClick для события click _sliderControls.forEach(function (item) { item.addEventListener("click", _controlClick); }); } // инициализация _setUpListeners(); return { right: function () { // метод right _transformItem("right"); }, left: function () { // метод left _transformItem("left"); } } } }());

JavaScript コードの主なアクションは、_transformItem 関数によって実行されます。 この関数は、渡された方向に応じて、 element.slider__wrapper を変換します。

スライダーの初期化次のように実行されます。

Var slider = multiItemSlider(".slider") スライダーのデモ

ループ スライダーを作成する方法

.slider__item 要素を変換することで、スライドをループさせることができます。

これを行うには、現在の位置と変換の値を各 element.slider__item にバインドする必要があります。

これらのアクションは、_items 配列を使用して実行できるのが最適です。

var_items = ; // 配列を items.slider__item で埋める _sliderItems.forEach(function (item, index) ( _items.push(( item: item, position: index, transform: 0 )); ));

ただし、配列だけでなく、たとえばデータ属性を使用して、データを要素にバインドできます。 ただし、DOM 操作は最も遅く、最もリソースを消費するため、他の方法で実行できる場合は使用しないことをお勧めします。

次のステップは、最小位置と最大位置を持つ .slider__item 要素を計算する関数を作成することです。

var position = ( getItemMin: function () ( var indexItem = 0; _items.forEach(function (item, index) ( if (item.position)< _items.position) { indexItem = index;` } }); return indexItem; }, getItemMax: function () { var indexItem = 0; _items.forEach(function (item, index) { if (item.position >_items.position) ( indexItem = インデックス; ) )); indexItem を返します。 )、getMin: 関数 () ( return _items.position; )、getMax: 関数 () ( return _items.position; ) )

最後の基本ステップやるべきことは、機能を洗練することです _transformItem. つまり、要素の位置を変更するコードを追加します .slider_itemそしてその変換を実行します。

Var _transformItem = 関数 (方向) ( var nextItem; if (方向 === "右") ( _positionLeftItem++; if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) > position.getMax()) ( nextItem = position.getItemMin() ; _items.position = position.getMax() + 1; _items.transform += _items.length * 100; _items.item.style.transform = "translateX(" + _items.transform + "%)"; ) _transform -= _step; ) if (方向 === "左") ( _positionLeftItem--; if (_positionLeftItem< position.getMin()) {
 nextItem = position.getItemMax();
 _items.position = position.getMin() - 1;
 _items.transform -= _items.length * 100;
 _items.item.style.transform = "translateX(" + _items.transform + "%)";
 }
 _transform += _step;
 }
 _sliderWrapper.style.transform = "translateX(" + _transform + "%)";
}

実際、ここではすべてが簡単です。
たとえば、次のスライドに移動するには、最初に items 配列を検索して、現在の右端の element.slider_item よりも大きい位置にある要素を探します。
配列にそのような要素がある場合、.slider__wrapper 要素の変換が実行されます (つまり、ループなしのアルゴリズムのようなアクション)。
しかし、もし そのような要素はありません、その後、 transform.slider__wrapper に加えて、他の多くのアクションが実行されます。 最初に、項目配列で要素が検索されます 最小位置で. この要素を受け取った後、 位置が設定され、その値は現在の右側の要素の値 + 1 に等しくなります. そして、もちろん、そうです 彼の変容、つまり、の最後になるようなパーセンテージで 最後の要素の後。

前のスライドに移動するには、同じ手順を逆に実行します。

さらに、ループ スライダーの場合、左ボタンと右ボタンの表示を切り替える必要はありません。 これらのボタンは、このバージョンのスライダーでは常に表示されます。
これを行うには、次のものが必要です。
「右」コントロールからslider__control_showクラスを削除します。
 
.slider__control セレクターの CSS で、display プロパティの値を flex に変更します。
スライダーデモ 
ループと自動スライドトランジションを備えたスライダーを作成する方法は?
setInterval 関数を使用して、特定の間隔でスライドを自動的に変更するようにプログラムできます。
Var _cycle = 関数 (方向) ( if (!_config.isCycling) ( return; ) _interval = setInterval(function () ( _transformItem(方向); ), _config.interval); )
この例の setInterval 関数は、_config.interval 変数の値に等しい定期的な間隔で _transformItem 関数を実行します。
また、スライダーにカーソルを合わせた際に自動でスライドが切り替わるストップを追加することが望ましい。
この機能は次のように実装できます。
If (_config.pause && _config.isCycling) ( _mainElement.addEventListener("mouseenter", function () ( clearInterval(_interval); )); _mainElement.addEventListener("mouseleave", function () ( clearInterval(_interval); _cycle( _config.direction); )); )
要素がユーザーに表示されない場合、自動スライド遷移を停止する方法は?
自動スライド変更を無効にすると、次の 2 つの場合に役立ちます。
ページ (このスライダーがあるページ) がアクティブでないとき。
 
スライダーがページの範囲外にある場合。
最初のケースは、visibilitychange イベントで処理できます。
Document.addEventListener("visibilitychange", _handleVisibilityChange, false);
visibilitychange イベント ハンドラーの関数:
// 「ドキュメントの可視性の変更」イベントを処理する var _handleVisibilityChange = function () ( if (document.visibilityState === "hidden") ( clearInterval(_interval); ) else ( clearInterval(_interval); _cycle(_config.direction); ) )
要素の可視性は、_isElementVisible 関数を使用して計算できます。
Function _isElementVisible(element) ( var rect = element.getBoundingClientRect(), vWidth = window.innerWidth || doc.documentElement.clientWidth, vHeight = window.innerHeight || doc.documentElement.clientHeight, elemFromPoint = function (x, y) ( return document.elementFromPoint(x, y); if (rect.right< 0 || rect.bottom < 0 || rect.left >v幅 ||  rect.top > vHeight) ( return false; ) return (element.contains(elemFromPoint(rect.left, rect.top)) || element.contains(elemFromPoint(rect.right, rect.top)) || element.contains (elemFromPoint(rect.right, rect.bottom)) || element.contains(elemFromPoint(rect.left, rect.bottom)));  )
たとえば、_transformItem 関数の先頭に _isElementVisible を呼び出すことができます。 スライダーが現在ビューポートの外にある場合、このアクションは自動スライド トランジションをキャンセルします。
Var _transformItem = 関数 (方向) ( var nextItem; if (!_isElementVisible(_mainElement)) ( return; ) //...
ブラウザ ウィンドウのサイズ変更に反応するスライダー
このバージョンのアダプティブ スライダーは、以前のものとは異なります。 ブラウザー ウィンドウのサイズを変更するときにアクティブな要素 (スライド) の数を変更する. 通常、ユーザーはブラウザのサイズを変更しませんが、それでも発生する可能性があります。
これは、resize イベントと _states 配列を使用して実装されます。 配列は計算に使用されます。 これを使用すると、必要がないときにスライダーを再初期化しないようにすることができます。
の一つ 効果的な方法サイトページでユーザーの注目を集めるのは、動くアニメーションの作成です。 アニメーション要素は、ユーザーに製品についてより視覚的に伝え、表示するのに役立ちます。 最近では、スライド パネルや、画像をスクロールしたりクリックしたりすると表示されるさまざまな効果が非常に人気になっています。 スライダー、カルーセル、スライダーとも呼ばれます。 この記事では、スムーズな自動スクロール効果を備えたアダプティブ カルーセル タイプのスライダーの作成について説明します。
今日まで、既製のソリューションへのリンクを含む何百ものレビューがWeb上にありますが、それらのほとんどには、スライダーのパフォーマンスを大幅に低下させ、サイト全体の読み込みを遅くする多くの未使用の機能が含まれています. プロの Web 開発者は、追加のライブラリやプラグインを追加する敷居が低く、カスタマイズが柔軟なソフトウェア製品を作成するために常に努力してきました。 そのため、このスクリプトでは、このようなスライダーを編成するための最小要件を使用しています。 作品の機能により、切り替え間隔、速度、および特定のスライドの選択を設定できます。 以下は、スライダー自体の動作を制御するいくつかの変数です。
タイムリスト- スライド切り替え速度
時間表示- ショータイム
ラジオバット- クイック ナビゲーション用のスライドの下のボタン。 デフォルト値は true です。false を使用すると、ボタンが非表示になります。
それでは始めましょう！ ファイルを作成して開く index.htm 
 

 

 

 

 

 

 

 
 

 
提示されたコードでは、ご覧のとおり、複雑なことは何もありません。 スライダーラップ定義する 総合職スライダーを画面の中央に揃えます。 パラメータ アクティブスライド長さに応じて画像のサイズと高さを設定します。 と スライダーアクティブな画像のみを表示します。
それでは、ファイルを作成して開きましょう スタイル.cssそこに必要なマークアップを書きます。
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto");  body ( color: #4f4f5a; font-family: "Roboto", sans-serif; font-size: 16px; padding: 0; margin: 0; ) #slider-wrap( max-width:800px; margin: 0 auto; margin-top: 80px; ) #active-slide ( width: 100%; display: table; position: relative; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms- user-select: none; -o-user-select: none; user-select: none; ) #slider( position: relative; width: calc(100% * 4); top: 0; left: 0; margin: 0 ; パディング: 0; -webkit-transition: 1 秒; -o-transition: 1 秒; 遷移: 1 秒; -webkit-transition-timing-function: イーズインアウト; -o-transition-timing-function: イーズイン-out; transition-timing-function: ease-in-out; ) .slide( width: calc(100%/4); list-style: none; display: inline; float: left; ) .slide img ( width: 100%; ) .Radio-But( margin-top:10px; text-align:center; ) .Radio-But .ctrl-select ( margin:2px; display:inline-block; width:16px; height:16px; オーバーフロー:hidden;text-indent:-9999px;background:url(radioBg.png) 中央下 no-repeat;  ) .Radio-But .ctrl-select:hover ( cursor:pointer; background-position:center center; ) .Radio-But .ctrl-select.active ( background-position:center top; ) #prewbutton, #nextbutton ( 表示:block; width:40px; height:100%; position:absolute; top:0; overflow:hidden; text-indent:-999px; background: url("arrowBg.png") left center no-repeat; opacity:0.5 ; z-index:3; Outline:none !important; ) #prewbutton ( left:10px; ) #nextbutton ( right:10px; background:url(arrowBg.png) right center no-repeat; ) #prewbutton:hover, # nextbutton:hover ( opacity:1; )
インスタイル プロパティ スライダーラップ書き留める 幅– 写真の最大長。
インスタイル プロパティ #slider ( width: calc(100% * 4); )と .slide ( 幅: calc(100%/4); )スライダーで画像の数を指定します。 この例では、4 つあります。
前後の矢印がスライダーの可視性を妨げる場合、それらを非表示にしてホバー時に表示することができます。 これを行うには、パラメーターで prewしかしと 次だけどで、不透明度プロパティを 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++) translateWidth = -$("#active-slide") .width() * (slideNum - 1); $("#slider").css(("transform": "translate(" + translateWidth + "px, 0)")); ) else if(arrow == " prew") ( if(slideNum == 1) ( slideNum=slideCount; ) else(slideNum-=1) translateWidth = -$("#active-slide").width() * (slideNum - 1); $(" #slider").css(("transform": "translate(" + translateWidth + "px, 0)")); )else( slideNum = arrow; translateWidth = -$("#active-slide").width( ) * (slideNum -1); $("#slider").css(("transform": "translate(" + translateWidth + "px, 0)")); ) $(".ctrl-select.active" .removeClass("active"); $(".ctrl-select").eq(slideNum - 1).addClass("active"); ) if(RadioBut)( var $linkArrow = $("<>").prependTo("#active-slide"); $("#nextbutton").click(関数()( animSlide("next"); return false; )) $("#prewbutton").click(関数()( animSlide("prew"); return false; )) ) var adderSpan = ""; $(".slide").each(function(index) ( adderSpan += " " + インデックス + "";
 });
 $("
"+adderSpan+"
").appendTo("#slider-wrap"); $(".ctrl-select:first").addClass("active"); $(".ctrl-select").click(function()( var goToNum = parseFloat($(this).text()); animSlide(goToNum + 1); )); var pause = false; var rotator = function()( if(!pause)(slideTime = setTimeout(function()(animSlide) ("次")), TimeView);) ) $("#slider-wrap").hover(function()(clearTimeout(slideTime); 一時停止 = true;), 関数()(一時停止 = false; rotator() ; )); var click = false; var prevX; $(".slide").mousedown(function(e)( click = true; prevX = e.clientX; )); $(".slide").mouseup( function() ( clicking = 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("カーソル", "ポインタ"); ローテータ（）;  ));
関数 アニメスライド next、prew、数値の 3 種類の値を受け入れます。  next パラメータは次のスライドを切り替え、prew は前のスライドを返します。数値は、スライドの下のラジオ ボタンで選択された特定のスライドです。
提示されたスライダーは、Web リソース https://pixabay.com/ の写真を使用しました。
jQueryで書かれたレスポンシブタッチスライダーです。 このプラグインのエンジンは CSS3 アニメーションを使用しますが、同時に、古いバージョンのブラウザー用のフォールバックが提供されます。  Glide.js はシンプルで軽量です。
使用法
1.jQueryを含める
唯一のプラグインの依存関係は jQuery であり、最初に含める必要があります。
 
2. Glide.js をインクルード
 
3.htmlを追加
基本スタイルを接続しましょう。
 
スライダーの html 構造をロールアップしてみましょう。
 

 

4. 初期化
デフォルト設定でスライダーを起動しています...
 
...または自分用にカスタマイズ
 
設定
利用可能なオプションのリスト:
パラメータ
デフォルト値
タイプ
説明
自動再生
4000

整数/ブール
自動スクロール (無効にする場合は false)
ホバーポーズ
真実
ブール
スライダーの上にマウスを置いたときに自動スクロールを一時停止する
アニメーション時間
500

整数
!!! このオプションは、ブラウザーが css3 をサポートしていない場合に機能します。  css3 がブラウザでサポートされている場合、.css ファイルでこのパラメータを変更する必要があります!!!
矢印
真実
ブール/文字列
矢印を表示/非表示/添付します。  True を指定すると、スライダー コンテナーに矢印が表示されます。 非表示にする場合は false。 クラス名（例：「.class-name」）を指定して、特別なhtmlコードを添付することもできます
arrowsWrapperClass
スライダー矢印
弦
矢印付きのコンテナに割り当てられるクラス
arrowMainClass
スライダーの矢印
弦
すべての矢印のメイン クラス
矢印右クラス
スライダー矢印右
弦
右矢印のクラス
arrowLeftClass
スライダー矢印左
弦
左矢印のクラス
矢印右のテキスト
次
弦
右矢印のテキスト
矢印左のテキスト
前へ
弦
左矢印のテキスト
ナビ
真実
ブール/文字列
スライド ナビゲーションの表示/非表示/添付。 表示する場合は true。 非表示にする場合は false
ナビセンター
真実
ブール
センターナビゲーション
navClass
スライダーナビ
弦
ナビゲーション コンテナのクラス
navItemClass
スライダー nav_item
弦
ナビゲーション要素のクラス
navCurrentItemClass
Slider-nav__item--現在
弦
現在のナビゲーション要素のクラス
キーボード
真実
ブール
左右ボタンでスライドをスクロール
タッチ距離
60

整数/ブール
タッチサポート（タッチ）。 この機能を無効にする場合は False。
初期化前
関数（）（）
関数
プラグインの初期化前に実行されるコールバック
afterInit
関数（）（）
関数
プラグインの初期化後に実行されるコールバック
遷移前
関数（）（）
関数
スライダーをスクロールする前に実行されるコールバック
afterTransition
関数（）（）
関数
スライダーがスクロールされた後に実行されるコールバック
API
API を使用するには、glide を変数に書き込みます。
var glide = $(".slider").glide().data("api_glide");
API メソッドを使用できるようになりました。
Glide.jump(3, console.log("Wooo!"));
.current() - 現在のサイド番号を返す
.play() - 自動スクロールを開始
.pause() - 自動スクロールを停止する
.next(callback) - スライダーを前方にスクロールします
.prev(callback) - スライダーを後方にスクロールします
.jump(distance, callback) - 特定のスライドにジャンプ
.nav(target) - 特定の要素にナビゲーションをアタッチします (例: "body"、".class"、"#id")
.arrows(target) - 特定の要素に矢印を付ける (例: "body"、".class"、"#id")

1.jQuery Fresco プラグイン
レスポンシブ jquery ギャラリー (画面解像度が変更されるとサイズが変更されます) がポップアップで表示され、サムネイルと画像キャプションが表示されます。  jquery fresco gallery は、IE6 以降、Firefox 3 以降、Chrome 5 以降、Opera 9 以降など、ほとんどのブラウザーで正しく動作します。 このプラグインの無料版は、非商用プロジェクトでのみ使用できます。
2.「アダプター」スライダー


さまざまなトランジション効果 (3D を含む 7 種類の効果) を備えたスライダー。  Github でのプロジェクト。
3. エフェクトが異なるスライダープラグイン「jQ-Tiles」


さまざまなトランジション効果、スライド速度の調整、自動スクロール機能を備えたプラグイン。
4.jQueryプラグイン「スライ」


縦横スクロールを実装するプラグイン。  Github でのプロジェクト。
5.アニメーションCSS3マキスメニュー


6. シンプルなスライドショー


7.機能的なjQueryスライダー「iView Slider v2.0」


コンテンツ スライダー / スライドショー (スライドは画像だけでなく、ビデオ クリップやその他の HTML コンテンツでもかまいません)。 ナビゲーションには、サムネイル、左/右ボタン、およびキーボードを使用できます。  Github.com のプロジェクト。
8. jQuery プラグイン「Vanity」のセット


セットには 7 つのプラグインがあります: jSlider、jTabs、jPaginate、jSpotlight、jTip、jPlaceholder、jCollapse。 これらのソリューションのセットは、スライダー、ツールチップ、タブ、画像ポップアップなどを実装するのに役立ちます.
9. ホバー CSS3 効果


10. CSS3 ドロップダウン メニュー


11.iOSスライダー


モバイル デバイスで動作するように設計されたスライダー。
12.CSS3読み込みインジケーター


13. CSS3 ホバー効果


14.「商品カラライザー」jQueryプラグイン


このプラグインは、商品をさまざまな色で表示するための軽量なソリューションです (たとえば、オンラインの衣料品店に関連して、訪問者が選択できるようにします)。 カラースキームいくつかのオプションからの製品)。 プラグインは、各製品に 2 つの画像のみを必要とします (すべての色がマスクとして重ねられます)。 このプラグインは、IE7+ を含むすべての主要なブラウザーで動作します (PNG 透過表示を修正すれば、IE6 でも動作します)。  GitHub でプロジェクトを作成します。
15.CSS3アニメーションチャート


16. 画像をクリックしたときのオーバーレイ効果の作成


画像をクリックすると、背景が暗くなり、キャプション付きの段落が表示されます。 したがって、画像にある要素の簡単な説明を与えることができます。
17. ドロップダウン メニュー形式のページ ナビゲーション


ドロップダウン メニューの形で便利なドキュメント ナビゲーションを実装するためのソリューション。 コンテンツは画面上部に固定され、常に訪問者の視野に留まります。 メニューでセクションを選択すると、ページはドキュメントの選択した部分にスムーズにスクロールします。
18.ホバー効果のあるCSS3ギャラリー


画像にカーソルを合わせると、写真がすばやく切り替わります。 ギャラリーは 2 つのバージョンで実装されています。ビジターがカーソルをギャラリーから離した後に表示される写真の説明付きと説明なしです。
19.jQuery視差スライダー


20. ブロック上の CSS3 ホバー アニメーション


21. CSS3 jQuery ポップアップパネル
デモ ページの画面下部にある矢印をクリックすると、ポップアップ アイコンが表示されます。
22. 無料HTML5画像ギャラリー「Juicebox Lite」


サイトの非常に機能的な新しい画像ギャラリー。 ギャラリーは、サムネイルの有無にかかわらず、画像の説明の有無にかかわらず、フルスクリーンに拡大したり、固定サイズのページに表示したりできます。 デモ ページでは、好きな種類のギャラリーを選択できます。 ギャラリーの無料バージョンをダウンロードできます。 より高度な機能と開発者のロゴを削除するには、料金を支払う必要があります.
23. プラグイン「JQVMap」


24. CSS3 視差スライダー


25.サムネイル付きのjQueryフォトギャラリー


レスポンシブ ギャラリー、画像、およびサムネイルのサイズは、ブラウザー ウィンドウのサイズによって変化します。
26. jQueryコンテンツスライダープラグイン「ホリナジャ」


このプラグインは、インストールが簡単で、カスタマイズ可能で、クロスブラウザーです。 画像だけでなく、あらゆる HTML コンテンツをスライドとして使用できます。 カーソルがスライド領域にある間、マウス ホイールを使用してスライドをスクロールできます。
27. jQuery Pikachoose スライダー プラグイン


3 つのバリエーション: 説明とサムネイルのない画像の単純な変更の実装。 画像キャプションとサムネイル付きのスライダー。 サムネイル付きのスライダーと、FancyBox 効果のあるポップアップ ウィンドウで大きな画像を開く機能が追加されました。 最新バージョンは、Github でいつでも見つけることができます。
28. ドロップダウン用のいくつかのカスタム CSS スタイル


さまざまな CSS 手法を使用した 5 つの異なるスタイルのドロップダウン。
29.アニメーション3D効果のあるレストランメニュー


ページ上の情報の興味深い CSS jQuery プレゼンテーション。 リンクをクリックすると、小冊子メニューが開き、訪問者はポップアップ ウィンドウで提供される料理の詳細を読むことができます。  IE でアニメーションが正しく表示されません。
30. Elastislide プラグイン


ラバーの実装 アダプティブ カルーセル（画像の垂直および水平カルーセル）および画像ギャラリー。 ブラウザー ウィンドウが縮小されると、画像の数が特定の最小値まで削減され、残りの画像のサイズがスケーリングされます。  Github でのプロジェクト。
31. 新鮮な CSS3 jQuery スリット スライダー


レスポンシブ スライダー プラグイン (幅はパーセンテージで設定でき、自動的にスケーリングされます) は、スライドを変更するときに興味深いアニメーション効果を備えた 2 つのスタイルで提供されます (スライドが半分にカットされ、異なる方向に移動し、新しいスライドが代わりになります)。 キーボード ナビゲーションが可能です。 最新バージョンは常に Github にあります。
32. 3D画像スライダー「Slicebox」の新バージョン


新しいバージョン変更と新機能の追加により、3D スライダーがスケーラブルになりました。ブラウザー ウィンドウを縮小すると、これを確認できます。  Firefox のサポートが追加されました。 スライドの説明では、すでに HTML コンテンツを使用できます (以前は、説明は HTML タグを使用する機能なしで link 属性から取得されていました)。 デモ ページでは、プラグインを使用するための 4 つのオプションを確認できます。 最新バージョン Github.com に住んでいます。
効果は 3D CU3ER フラッシュ ギャラリー (デモ、ダウンロード) と非常に似ていますが、この 3D スライダーのみがフラッシュ テクノロジではなく JavaScript を使用して作成されています。
33.jQueryプラグイン「PFold」


実験的な解決策。 このプラグインは、ノートの展開を模倣した 3D 効果を実装します。 各種オプション実行: 3 ターン、2 ターン、1 ターンで展開された音符が中心に配置されます。
34.jQueryプラグイン「Windy」


画像などのコンテンツをナビゲートするためのプラグイン。 写真をスクロールすると、それらはさまざまな方向に散らばります (この効果は、 トランプゲームポーカー）。 ナビゲーションには、左右のボタンまたはスライダーを使用できます (さまざまなオプションについては、デモ ページを参照してください)。 プロジェクト