jQuery の Vlasny スライダー。 シンプルなアダプティブ タッチ jQuery スライダー jQuery の美しいスライダー

この記事では、CSS フレックスボックスと CSS 変換を使用して Web サイト用のアダプティブ スライダーを作成することがいかに簡単であるかを見てみましょう。

GitHub 上で、chiefSlider というスライダー プロジェクトが推進されています。 早速女御へ行ってみましょう。

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

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

記事を回転するためのスライダーを設定する方法を示す例:

このスライダーの主な利点を列挙してみましょう。

• まず第一に、たとえば OwlCarousel プラグインや Slick プラグインで実装されているように、ループを整理するために要素 (項目) のクローンを作成することはありません。
• そうしないと、jQuery ライブラリに保存されません。 追加の特典を集めるだけではなく、簡単な特典を配布することも重要です。
• 第三に、ドキュメントの DOM に必要な変更を加えないのが現実的です。 必要なのは、スライダー要素を変換して CSS 値を追加および変更することだけです。
• 4 番目に、最小限の機能セットを購入する余裕がありません。 必要に応じて、追加の機能を個別に追加できます。
• 言い換えれば、それは適応的です。 どのサイトでも vikorist できます。 スライダーの適応性は追加の CSS を使用して調整されます。
• 基本的に、多くのアクティブな要素は追加の CSS を使用して設定されます。 これは、これを使用して、1 つのアクティブなスライドまたは他の任意の番号を含むカルーセルを作成できることを意味します。

スライダーの取り付けには 3 つの手順が必要です。

• CSS スライダーのchiefSlider をサイドまたは CSS ファイルに追加し、サイドに接続します。
• スライダーの HTML コードをサイドバー上の目的の場所に配置します。
• 側面にJavaScriptコードまたはjsファイルを挿入し、側面に接続します。

ページをより魅力的にするために、CSS と JavaScript コードは最小限に抑える必要があります。

chiefSlider スライダーは、HTML コード、CSS、および JavaScript (jQuery を使用しない) を使用して作成されます。

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

どうやら、スライダーは非常に単純な HTML アーキテクチャを備えているようです。 メインブロックであるスライダークラスから始めます。 このブロックは 3 つの要素で構成されます。

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

他の 2 つの要素 (slider__control) は、視覚的にはボタンです。 これは、スライド内を移動するのに役立ちます。 前方要素と前方要素に移行します。

チーフスライダースライダーの CSS コード:

/* メイン スタイル */ .slider (position:相対; overflow: hidden; ) .slider__wrapper ( display: flex; 50%; /* はアクティブなスライドの数を示します (このカテゴリでは 2 */ max-width: 50%; /* はアクティブなスライドの数を意味します (このカテゴリには 2 つあります */ ) /* 戻るボタンと進むボタンのスタイル * / .slider__control (position: 絶対; 表示: なし; トップ: 50%; 変換: translationY(-50 %) ; align-items: center; justify-content: center; /* ボタンの幅 */ 高さ: #000; テキスト装飾: なし;アウトライン: 0; 不透明度: .9; /* 可視性 */ ) .slider__control_left ( left: 0; ) .slider__control_right ( right: 0 ; ) .slider__control::before ( content: " "; 表示: インラインブロック; 幅: 20px; /* アイコン (矢印) 幅 */ 高さ: 20px; /* アイコン (矢印) 高さ */ 背景: 透明 リピートなし 中心 背景サイズ: 100% ) .slider__control_left::before : 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 つのアクティブなスライドの親を担当し、大きなスライドではその役割を果たします。その理由は次のとおりです。

Slider__item ( flex: 0 0 100%; max-width: 100%; ) @media (min-width: 980px) ( .slider__item ( flex: 0 0 25%; max-width: 25%; ) )

チーフスライダースライダーの JavaScript コード:

"厳密な使用"; var multiItemSlider = (function () ( return function (selector) ( var _mainElement = document.querySelector(selector), // ブロックのメイン要素 _sliderWrapper = _mainElement.querySelector(".slider__wrapper"), // ラッパー for.slider- item_s = _mainElement.querySelectorAll(".slider__item"), // 要素 (.slider-item) _sliderControls = _mainElement.querySelectorAll(".slider__control"), // 要素 _sliderControlLeft = _mainElement.querySelector(".slider__ "LEFT" ボタン _sliderControlRight = _mainElement.querySelector(".slider__control_right"), // 「右」ボタン _wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width), // ラッパーの幅 _itemWid dth), // 1 つの要素の幅 _positionLeftItem = 0, // 左アクティブな要素の位置 _transform = 0, // 配列上の変換値 _items _sliderItems.forEach(function (item,index) (_items.push(( item: item,position:index,transform: 0 ))); )); = ( getMin: 0, getMax: _items.length - 1, ) var _transformItem = function (方向) ( if (方向 === "右") ( if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1)).getMax) (戻る; ) if (!_sliderControlLeft.classList.contains("slider__control_show")) ( _sliderControlLeft.classList.add("slider__control_show"); ) if (_sliderControlRight.classList.contains("slider__control _wrapperWidth / _itemWidth) >= Position.getMax) ( ControlRight .classList.remove("slider__control_show"); _positionLeftItem++; _transform -= _step; ) if (direction === "left") (if (_ ; ) return (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.底）））;

たとえば、_isElementVisible クリックを _transformItem 関数の先頭に配置できます。 これにより、スライダーが現在ビューポート位置にある場合に、スライドの自動変更を設定できます。

Var _transformItem = function (方向) ( var nextItem; if (!_isElementVisible(_mainElement)) ( return; ) //...

このバージョンのアダプティブ スライダーは以前のバージョンを超えており、ブラウザ ウィンドウのサイズを変更するときにアクティブな要素 (スライド) の数を変更できるようになります。 ブラウザのサイズを変更しないように注意してください。変更しないと、このような問題が発生する可能性があります。

サイズ変更と _states 配列の追加の助けを借りて実装されています。 山塊は計算に使用されます。 必要な場合を除き、ためらわずにスライダーを再初期化してください。

アダプティブ Web デザイン、または必要に応じてセンシティブ Web デザインは、単なる流行のデザイン トレンドではなく、Web サイト開発の標準でもあり、Web サイトの多用途性、さまざまな消費者デバイスの画面上での調和のとれた視覚的調和を保証します。 つい最近、アダプティブ テンプレートを開発する際、元のデザイン スタイルを損なうことなくスライダーと画像ギャラリーを統合するというさまざまな困難に対処する必要がありました。 現在では、すべてがはるかにシンプルになり、同時に多数の既製のソリューションが実現され、特にそれらのほとんどに秘密の終了コードを使用して自由にアクセスできるようになりました。

提示されたツールの多様性を通じて、常に表示され、境界なくどこにでも表示される画像を表示するアダプティブ jQuery スライダーの最も注目すべき開発について簡単に見ていきました。 完全に費用はかかりません。

アダプティブ jQuery スライダーは、素晴らしい視覚効果 (回転、ボレー、スプレッド、スパイラル、ブラインドなど) のセットとさまざまな既製のテンプレートとともに表示されます。 WOW Slider に組み込まれたサイドバー挿入マスターの助けを借りて、病気の治療のための奇跡的なスライドショーを簡単かつ楽に作成できます。 小売業者の Web サイトには、ロシアのプラグイン、プラグインの奇跡的なライブ アプリケーションのセットアップと使用に必要なすべてのドキュメントがあります。 Joomla 用の同じ Wordpress プラグインとモジュールもダウンロードできます。 この素晴らしいスライダーが、初心者にも、このアイデアを思いついた Web マスターにも、多くのことを提供してくれることを祝福します。

HiSlider - HTML5、Jquery スライダー、画像ギャラリー。WordPress、Joomla、Drupal などの一般的なシステムで管理されているサイトで特別な編集を行うための完全に無料のプラグインです。 このシンプルでありながら機能的なツールを利用すると、驚くべきスライド ショー、効果的なプレゼンテーション、サイトのページ上での新しいニュースの発表をそれほど手間をかけずに作成できます。 スライダー用の多数の既製のテンプレートとスキン、魅力的なトランジション効果、さまざまなマルチメディア コンテンツの表示 (YouTube や Vimeo のビデオ、ユーザー用のカスタマイズ ツールなど)。

Nivo Slider は古き良きもので、知る人ぞ知る、歴史上最も美しくシンプルな画像スライダーの 1 つです。 JQuery Nivo Slider プラグインは、使用とさらなる開発に費用がかからず、MIT ライセンスの下で拡張されています。 これは WordPress 用の優れたプラグインでもありますが、残念ながら有料でもあり、1 ライセンスあたり 29 ドルかかります。 十分な情報が得られるため、少し時間をかけて WP ファイルを操作し、無料の jQuery バージョンの Nivo Slider プラグインをブログに添付することをお勧めします。
機能に関しては、すべてが整っています。 この作業には、jQuery v1.7+ ライブラリ、優れたトランジション効果、シンプルで簡単な調整、アダプティブ レイアウト、自動画像トリミングなどが使用されています。

スライダーのアイデアは、選択したカテゴリをクリックすると、シンプルなアニメーション効果で多数の小さなオブジェクトが変化するという、Apple 製品のプレゼンテーションのおなじみのスタイルに慣れている小売業者からインスピレーションを得たものです。 Codrops は、スライダー、HTML マークアップの新しいレイアウト、CSS ルールのセット、jQuery を変換するプラグインの作成方法に関するレポートに加え、カスタム スライダーの素晴らしいライブ サンプルを提供します。

サイト側のプラグイン連携により、JQueryとCSS3+レポートツールに全画面スライダーが表示されます。 このアイデアは、次または前の場所に移動する前に、前のコンテンツを含むオープン フロー スライドをカットすることです。 JQuery と CSS アニメーションを利用すると、スライド間に独自のトランジションを作成できます。 アダプティブ スライダー レイアウトにより、さまざまな種類のデバイスの画面でも見栄えが良くなります。

展開されたコンテナーの寸法に応じて幅と高さを自動的に調整するスライダーがあります。 JQuery 上で動作するシンプルでカスタマイズされたスライダーを追加します。下部にナビゲーションがあり、画面サイズを変更するとナビゲーションがアイコンの形式で表示されます。 このドキュメントは非常に有益 (作成のレッスン) であり、vikoristan の実際のアプリケーションです。

スライダーの実験版では、3D 平面からの遷移を伴う画像が示されています。 画像は 2 つの水平列に分割されており、ナビゲーション矢印を使用して、あるビューから別のビューにスキン イメージを変更したり移動したりできます。 特別なことは何もありませんが、ジュースを入手するためのヴィコナニヤのアイデアとテクニックそのものです。

非常に簡単に言うと、100% 応答性が高く、フルスクリーンの jQuery 画像スライダーです。 スライダーの動作は、jQuery の魔法と関連した CSS トランジション (トランジション パワー) に基づいています。 max-width の値は 100% に設定されているため、画面サイズの変化に応じて画像のサイズも変化します。 デザインには特別なアニメーション効果はなく、すべてがシンプルで、操作が中断されないように設計されています。

名前は一目瞭然で、おそらく利用可能な jQuery 画像スライダーの中で最も軽く、最もミニマルなものの 1 つです (1kb プラグイン)。 ResponsiveSlides.js は、コンテナの中央にスライドショーやポップアップ要素を作成するクールな JQuery プラグインです。 IE 6 以降の進歩の有名な祭典である IE のすべてのバージョンを含む、幅広いブラウザで動作します。 念のため、ロボットは JavaScript と組み合わせて CSS3 トランジションを使用します。 順序なしリストを簡単に並べ替え、トランジションと時間間隔を調整し、スライドを自動および手動で切り替え、複数のスライド ショーを一度にサポートします。 アクスルはshvidky「malyuk」アクスルです。

Camera は、Web サイトのページ上でスライドショーを整理するための無料の JQuery プラグインで、トランジション効果のない軽量のスライダー、100% アダプティブ レイアウト、非常にシンプルなセットアップを備えています。 あらゆるコンピュータデバイス（PCモニター、タブレット、スマートフォン、携帯電話）の画面に見事にフィットします。 ダウンロードしたビデオをデモンストレーションする可能性。 スライドの自動切り替えと追加ボタンと画像サムネイルブロックの手動操作。 コンパクトな viconn の写真の完全なギャラリーもあります。

jQuery のもう 1 つの単純なアダプティブ スライダー。 スライドには、あらゆるコンテンツ、ビデオ、画像、テキスト、その他の要素を含めることができます。 タッチスクリーンのサポートを拡張しました。 Vikoristannaya CSS 遷移アニメーション。 スライド ショーやコンパクトな画像ギャラリーのプレゼンテーションには、さまざまなバリエーションがあります。 自動および手動制御。 追加のボタンを使用してスライドを混合し、サムネイルを選択します。 出力ファイルのサイズが小さいため、セットアップと実装がさらに簡単になります。

FlexSlider 2 — 単一名のスライダーの更新バージョン。応答速度が向上し、スクリプトが変更され、再配置/書き換えが最小限に抑えられます。 このプラグインには、基本的なスライダー、追加のサムネイル用のスライド コントロール コントロール、左右の矢印、およびボタンの外観の下部ナビゲーション バーが含まれています。 スライド内にビデオを表示する可能性 (vimeo)、パラメータ (トランジション、デザイン、時間間隔) の柔軟なカスタマイズ、完全にアダプティブなレイアウト。

高品質のギャラリーや画像スライダーを作成するための、人気のある適応型 jQuery プラグインへようこそ。 スライダー インターフェイスは全体として、オリジナルのビデオ プレーヤーを視覚的に思い出させ、プラグインにはさまざまなデザイン テーマが含まれています。 Flickr、Vimeo、YouTube などの人気サービスからダウンロードされたビデオと画像のサポート。 調整と wiki からの詳細なドキュメント。

レスポンシブ Web デザイン用に特別に書かれた、シンプルで余計なものがなく、コストのかからない JQuery 画像スライダー。 Blueberry は、クローズド ソース コードを備えた実験的な JQuery プラグインです。 ミニマルなデザインで、エフェクトは一切なく、短時間で次々と変更できる写真をスムーズに結合するだけです。 すべては非常に簡単です。インストールして、接続して、すぐに使用できます。

ライトボックス要素とともに表示される非常にコンパクトな jQuery スライダー。 サイズが小さいにもかかわらず、サムネイル形式の 1 つのエントリで任意のコンテナに簡単に配置できます。マウスをホバーするかクリックすると、より大きな画像とコントロール要素を備えたライトボックスがアクティブになります。 このようなスライダーは、製品のプレゼンテーションや新製品の発表のために他のパネルに簡単に配置できます。 大量の情報が含まれる Web サイトに最適なソリューションです。

高度な CSS3 トランジションを備えたコストのかからないアダプティブ スライダー。 ミニマリスト スタイル、3 つのデザイン テーマ。スキン フレームは水平方向に走り、中央に表示されます。写真は左に、キャプションは右に表示され、ミニチュアは右下隅に複製されます。 肌の中で確認できるように製品を横に並べて表示します。 コントロールには戻るボタンと進むボタンも含まれています。 現在のブラウザのサポート。

機能と設定を備えた非常にシンプルな画像スライダー、スライドの変更速度の変更の有無の調整、手動モードへの接続 (コントロール ボタンが有効)、中断のないスライド ショー。 この研究では特に有益なものは何も得られていないため、このスライダーには権利があるかもしれませんが、あまり利益はありません。悪い冗談かもしれません）））

Volodymyr Kudinov と彼の同僚による、素晴らしい適応型画像スライダーです。 初期バットと作成、取り付け、取り付けに関する詳細な説明書が付属しており、良好でよく機能する楽器です。 アダプティブ デザイン、かわいいボタン、緑色の矢印、すべてが圧迫感なく、うまく、落ち着いて機能します。

画像やテキスト スライドの視差効果を備えた無料の jQuery スライダー プラグイン。 スライドのアニメーションは、時間とアニメーションのスキン パラメーターを完全に制御して、表示の価値を高めます。 スライド上の複数の要素のアニメーションの可能性。 さまざまなアニメーション方法をインストールしたり、スライドを作成したり、曲から直接切り替えることができます。 画像上にマウスを置くと結合される追加のナビゲーション矢印の自動表示と手動ナビゲーション。 10種類のアニメーション効果やスライドなど。

世界を見渡すと非常に充実していますが、対象となる製品の数が多いため、あまり有益ではありません。 各プラグインの機能のすべての詳細と詳細な説明は、小売業者のページで直接確認できます。 Web サイトのページにカラフルな画像スライダーを作成するために必要なツールを探している人がいるとは思いません。

このことを考えている場合、Russified テンプレートを使用するのは悪いことでしょうか? ちょっと考えてみましょう。 英語のテンプレートを扱うのに 1 時間を費やしました。 TemplateMonster マーケットプレイスで現在入手できるものを皆さんに喜んでいただけるよう急いでいます。 それぞれのテキストは手書きで書かれています。 そしてもちろん、既製のソリューションはすべて、ヴィコリスタンにとって信じられないほどシンプルです。

アンドリーに敬意を表して

著者のメモ: スクロールせずに表示される Web ページの一部の「死」には敏感ですが、優れたスライダーは必要ありませんでした。 正直に言うと、スライダーは楽しいです。 さらに、ユーザーに「すごい」という効果を与えずに崩壊するコンテンツには、他に何もありません。 すべてのスライダーは複数のスライドのセットであるため、スライダー コードをできるだけ軽くするために、一度に 1 つずつ変更することが重要です。 このような状況では、jQuery が役に立ちます。

Envato Market の 20 個の jQuery スライダーを見てみると、滑らかに変化する単なる画像のブロック以上のスライダーがあることがわかります。

適応性の高いスライダーはタッチ スクリーンにも使いやすく、以前よりもはるかに多くの意味を持ちます。 RoyalSlider には、適応性とタッチ スクリーンでの操作という興味深い機能がいくつか含まれています。 ギャラリーは HTML5 と CSS3 で記述されているため、良い選択です。

機能のリスト:

JavaScript。 クイックスタート

SEOの最適化

高いレベルの調整

10 を超える穂軸テンプレート

CSS3 トランジションの Є フォールバック

私の意見では、最も優れた機能は「モジュラー スクリプト アーキテクチャ」です。これにより、メインの JS ファイルから不要な音声を含めることができ、それによって入力が変更されます。 RoyalSlider、JQuery のタッチスクリーン イメージ ギャラリー – あらゆる開発者向けのツール セットを強化できる信頼性の高い JavaScript スライダー。

スライダーを使って「革命的な」仕事をするのはそれほど簡単ではありません。 スライダーについて言えば、さらに多くの機能を追加できます。 しかし、Slider Revolutionは本当に良いテストです。 JQuery スライダーの中でも、このインスタンスは考えられるすべての利点を提供します。

テーブル スライダーの可能性のリストは長いため、いくつかだけをリストします。

視差効果とコリストヴァッハアニメーション

メッセージ入りのボールやスライダーの数に制限はありません

すぐに使える、詳細な微調整が可能なスタイル

他にもたくさん

画像の追加、ビデオ プレーヤーの使用、ソーシャル ネットワークからの送信機能により、Slider Revolution は最も柔軟でカスタマイズ可能なオプションの 1 つになります。

「LayerSlider アダプティブ jQuery スライダー プラグイン」という名前以外では、このスライダーを適切に評価することはできません。
スライド間の 200 以上の 2D および 3D トランジションにより、誰もが振り向くようになります。

いくつかの素晴らしい機能:

13種類のスキンと3種類のメニュー

静止した画像をスライダーの上に配置する機能

→ JQueryフォールバック

他にもたくさん

前のスライダーと同様に、HTML5 常駐のマルチメディア コンテンツなどの任意のコンテンツを追加できます。 LayerSlider はスライダーが大好きですが、それはさらにひどいことです。

jQuery バナー ローテーター / スライドショー - 主な機能を犠牲にすることなく、シンプルなスライダーを追加します。

可能性：

ツールタイプ、テキスト挿入など。

正面図とコンポーネントをレビューするためのさまざまなオプション

1 つのスライダーまたはすべてのスライダーのシャッター付きタイマー

すべてのスライドの複数のトランジション、またはスキン トランジションの複数のトランジション

jQuery バナー ローテーター / スライドショーは、他の jQuery スライダーと同様に、基本的な機能しかありませんが、それを忘れるのは簡単ではありません。

中央に出現するスライダーにはそれぞれ独自のタンクがあり、そのガルーサに何らかの問題が発生します。 どうでも。 All In One Slider は「オールインクルーシブ」と呼ぶことができます。

ほとんどの Web 開発者やデザイナーは、その決定について考えすぎているのではないか、そうでない場合は何か新しいものを探すことになると思います。 この「新機能」には次のものが含まれます。

バナーローテーター

プレビュー付きバナー

プレイリスト付きバナー

コンテンツスライダー

カルーセル

すべての種類のスライダーはほとんどの機能を提供しますが、jQuery スライダーに必要なすべての機能が提供されるわけではありません。 オールインワン スライダーはオールインクルーシブですか?

スライダーが反応せず、タッチ スクリーンをサポートしていない場合は、スライダーが間違っています。 UnoSliderは正しいです。

このスライダーは、シンプルさと豊富な機能の間でその位置を知っています。 機能：

トピックのサポート

12 個の既成のテーマ

40 のトランジション

IE6+のサポート

すべての機能は巧みに設計され、スタイル設定されているため、テーマを追加する機能を備えた高度なコンテンツ スライダーとして UnoSlider を使用できます。

「1 つの jQuery スライダーですべてを編集できる」と言っているのでしょうか? Master Slider – さまざまな画面サイズ用の JQuery タッチスクリーン スライダーをお試しください。

適切なデザインが欠けている場合は、このコピーが最も優れたものの 1 つです。

25 を超えるテンプレート

ハードウェア速度に移動

タップとスワイプでサポート

他にもたくさん

インタラクティブなトランジション、アニメーションボール、ホットスポットが注目を集めます。 マスター スライダーは神秘的な精霊です。

TouchCarousel は、無料のサポートとアップデートを追加します。 ただし、この軽量の JQuery スライダーのすべての関数がカルーセル タイプであるわけではありません。

名前に「タッチ」という単語が含まれているため、スライダーが完全に適応し、タッチをサポートしていることが推測できます。 その他の機能:

SEOの最適化

よりスマートな自動作成

CSS3 ハードウェアへのショートカットへ移動

Photoshop 用のカスタマイズされた UI と 4 つのスキン

TouchCarousel は、その独自の物理的なスライド スクロールを通じて、モバイル デバイスにまったく新しい範囲のエクスペリエンスを導入します。

jQuery スライダーはさまざまな Web サイトで使用できます。 これらは Web アドオンにも役立つ可能性があります。 アドバンスト スライダーを使用すると、あらゆるものを作成できます。

HTML または XML レイアウトを使用すると、挿入されたスライダーは次の避けられない目標に対処します。

アニメーションボールとスマートビデオ

100 以上の移行と 150 以上の権限が調整中

スライダー用の 15 個のスキン、スクロールバー用の 7 個のスキンとライトボックスのサポートが含まれています

キーボードのナビゲーション、ドットのサポート、カスタマイズ

他にもたくさん

ただし、Advanced Slider の最大の機能は、スライダーを Web プログラムにとって理想的なオプションにする jQuery XML Slider API です。

これらの JQuery スライダーの 1 つを使用すると、その機能について読み始める前にデモを見てみることが勧められます。 「ズームイン/ズームアウト効果」の意味を理解したいだけです。

ズームの効果は弱いですが、他のスライダーが静止しているときに、制御と正しい画像操作が追加されます。 スライダーの特徴:

ボール間のCSS3トランジション

ボールのアニメーション終了パラメータ

固定幅オプション、全画面および全幅

HTML および CSS 形式のアニメーション テキスト

ほとんどのスライダーはより多くのエフェクトを組み込もうとしていますが、jQuery Slider Zoom In/Out Effect Fully Responsive には Ken Burns エフェクトのみが含まれていますが、実装はより優れています。

よく知られている高度なスライダーである jQuery XML スライダーと同様に、jQuery Carousel Evolution には独自の API があり、カスタマイズして機能を強化したり、スライダーを別のプロジェクトに統合したりできます。

JavaScript。 クイックスタート

Web アプリケーションを作成するための実践的なアプリケーションで JavaScript の基礎を学びます。

画像、HTML マークアップ、YouTube、Vimeo ビデオを使用して、以下も表示できます。

SEOの最適化

9 つのカルーセル スタイル

影と画像の効果

画像サイズは前後とも調整可能

jQuery Carousel Evolution – 無制限の選択肢を備えたシンプルなカルーセル。

セクシースライダーは以前ほどセクシーではなくなりました。 しかし、その世紀を通じて、スライダーは信頼を獲得してきました。

一見するとあまり印象に残らないスライダーですが、うまく調整すればデザインにぴったりとフィットします。 可能性：

スライドの自動プログラミング

画像の前のキャプション

中断のないスライドの作成

6つのトランジションエフェクト

セクシースライダーはあなたの可能性をすべて解き放ちます。

モバイル デバイスとタッチ スクリーン向けのこれらすべてのデザインにより、デスクトップ コンピューターを忘れることなく、JQuery スライダーを使用できます。

jQuery Image & Content Scroller w/Lightbox は、キーボード入力とマウス ホイール入力、およびその他の機能をサポートしています。

水平方向と垂直方向

中間またはスライダー呼び出しのテキスト署名

一度に表示できるスライドの数を設定する可能性

埋め込み画像、Flash、iframe、Ajax、オンライン コンテンツ

スライダーにはライトボックスもあります。 jQuery Image & Content Scroller with Lightbox の場合、スライダー自体を起動することはできませんが、ライトボックスも起動することはできません。

ほとんどの jQuery スライダーは独自のデザインを持っています。 自分用にカスタマイズできますが、すべてをスライダーの中央に配置したい場合もあります。 誠に勝手ながら、Translucent について自己紹介させていただきます。

スライダーにはたくさんのプリセットがあります。 おそらく、曲を調整するように設定するだけで十分です。 可能性：

6つの異なるスタイル

4つのトランジションエフェクト

2 スワイプで移動

ボタンとキャプションを構成する

他のスライダーと同様に、このスライダーはトルネード、アダプティブ、およびハードウェア アクセラレーションをサポートしています。 Translucent は、コンテンツそのものを前面に押し出したミニマルなデザインのスライダーです。

スライドで構成される全画面 Web サイトを作成したいですか? 次に、FSS が必要になります。

実際、この JQuery スライダーを利用すると、全画面スライダー Web サイトを非常に簡単に作成できます。 可能性：

AJAXのサポート

スクロール・バー

ディープリンクテクノロジーのサポート

2つの異なるトランジションエフェクト

また、キーボードを支えるために11面ガイドを使用してください。 Prote pravozhnya vazhenya vyklika vaga FSS、5Kb 未満。

スタイルとその処理の仕方に焦点を当てた JQuery スライダーのもう 1 つの例。 ZOZO Accordionは、スタイルを変更できる優れたアコーディオンスライダーを探している人にとって簡単です。

CSS3 アニメーションによるこの美しさは、幅広い機能も提供します。

水平および垂直アコーディオン

セマンティック HTML5 と SEO の最適化

ドット、キーボード、WAI-ARIA のサポート

10 種類以上のスキンと 6 種類のレイアウト

他にもたくさん

ZOZO Accordion には、JQuery アコーディオンに必要なすべての機能に加え、無料のサポートと定期的なアップデートが含まれています。

jQuery Responsive OneByOne Slider Plugin は、スライダーというよりは単純なアニメーションに似ています。 このインスタンスでは、一度に 1 枚のスライドを表示するのではなく、領域がなくなるまで一度に 1 枚ずつスライドで画面を埋めていき、その後次のスライドに移動します。

CSS3 アニメーションは Animate.css を利用しており、簡単で、いくつかのボールで構成でき、モバイル デバイスと互換性があります。 機能：

ドラッグ アンド ドロップを使用したナビゲーション オプションもあります。 jQuery Responsive OneByOne Slider Plugin は、Twitter Bootstrap カルーセルに基づいています。

これほど簡単な jQuery スライダーはありません。 動作するには、3Kb スライダーだけを使用する必要があるため、最も軽いアコーディオン タイプのスライダーで Accordionza をアップグレードできます。

3 つのスタイル オプションに慣れていない場合は、HTML と CSS を自分で送信できます。 可能性：

キーボードナビゲーション

エフェクトやボタンのカスタマイズが簡単

プログレッシブリダクション技術 - JavaScript なしで動作します

Accordionza は任意の数の混合コンテンツ オプションを表示できるため、作業がさらに困難になることに注意してください。

MightySliderは本当にタイトなスライダーです。 単純な画像スライダーとしてだけでなく、メニュー項目間のナビゲーションを備えた全画面の一方向スライダーとしても使用できます。 この助けを借りて、素晴らしい一方的なウェブサイトを作成することができます。

内部にはいくつかのオプションがあります。

キーボードのサポート、クマとトーカン

CSS3 ハードウェアへのショートカットへ移動

純粋に有効なレイアウトと SEO の最適化

スライド、サイン用のボール、その前のエフェクトの数は含まれません。

API は強盗に対してさらに厳しく、より親切になっており、その成長のさまざまな方法が明らかになります。 MightySlider は、クリーンで十分にコメントされたコードを備えた、素晴らしく進歩的な JQuery スライダーです。

Parallax Slider は、jQuery Responsive OneByOne Slider プラグインと同様に機能し、1 つのスライドの中央付近でスキンをアニメーション化できます。 すべてのスライドをアニメーション化することも、視差アニメーションを追加して 1 つだけをアニメーション化することもできます。

セットには視差効果を備えた異なるタイプの 4 つのスライダーが含まれています。 他の jQuery スライダーと同様に、ここでも次のようになります。

新しい気分

トルカンをサポートする

完全に適応性があり、ボールの数は無制限

自動プログラミング、ループ、高さと幅の調整、タイマー

アニメーションのバルーン - テキストだけでなく画像も。 YouTube、Vimeo、HTML5 ビデオを追加することもできます。 Parallax Slider は、Flash 自体よりも Flash 効果をより適切に作成できることを示すもう 1 つの良い例であり、これもすべてのデバイスでサポートされています。

jQuery スライダーは、単に画像を別の画像に置き換えるだけのものから、優れたクリエイティブ ツールのセットに成長したことに注意することが重要です。 Infection には、3D、視差スライダー、フルページ スライダー、デスクトップ コンピューターとスマートフォンの両方で表示できるアダプティブ スライダーが含まれています。

このリストのスライダーが気に入らない場合は、いつでも Envato の jQuery コード チュートリアルを受講して、まったく新しいユニークなものを作成できます。

そうですね、Envato マーケットの他のスライダーを見てください。選択肢はたくさんあります。 あなたのお気に入りの JQuery スライダーは何ですか?またその理由は何ですか?

まず言っておきますが、この記事は、Web ページのスクロール画像スライダーを作成する方法を説明するために書かれたものです。 いずれにせよ、この記事は初期の性質のものではなく、むしろ私たちの目的をどのように実現できるかを示す一例として役立ちます。 この記事のコードは、そのような調査のテンプレートとして使用でき、私が書いたことの本質全体を読者に明確かつ簡単に伝えることができると確信しています。

さて、ご存知のとおり、私は最近、あるサイトにスライダーを配置する必要があったのですが、インターネットで既製のスクリプトを探しましたが、役立つものが何もわかりませんでした。 要求どおりに動作しないものや、コンソールでエラーが発生せずに起動しないものもあります。 Vikoristovat jQuery - スライダー Meni 用のプラグインは、まったく役に立たないことが判明しました。 それを知りたいのですが、仕組みを十分に理解していないと、1 つのスライダーにプラグインを使用するのは最適ではありません。 歪んだスクリプトを理解することも私の好みではなかったので、スライダー用の独自のスクリプトを作成することにしました。これは私自身が必要であることがわかります。

まず、スライダー自体のロジックを理解してから、実装に進む必要があります。この段階では、基礎となる動作メカニズムを理解することがさらに重要です。それがなければ、希望どおりに動作するコードを書くことができないからです。

主なオブジェクトはビューポートです。ビューポートは画像を表示および回転するブロックです。スライドラッパーは、1 行に配置されたすべての画像を格納するブロックです。ビューポート自体の中央にある自分の位置。


さらに、ビューポートの中央の側面と中央の垂直方向に「戻る」ボタンと「進む」ボタンが配置され、それらをクリックすると、ビューポート内のスライドラッパーの位置も変更され、それによって効果が生じます。通過する画像の数。 そして、残りのオブジェクトはビューポートの下部にあるナビゲーション ボタンになることに決めましょう。


それらをクリックするときは、そのボタンのシリアル番号を確認し、同じスライドラッパーの変位パスを使用して必要なスライドを再度クリックするだけです (変位は、transform の CSS パワーを変更することで実行され、その値は着実に計算されますよ）。

ここまでの内容を入力した後、プロセス全体のロジックがより明確になったと思いますが、ここでの問題がまだ不明瞭な場合は、以下のコードですべてが明確になります。少しの忍耐が必要です。

さあ、書いてみましょう！ まず最初に、インデックス ファイルを開いて、そこに必要なマークを書き込みましょう。

実際のところ、何も複雑なことはありません。block-for slider は、スライダーが配置されるブロック自体として機能します。その中央には、スライドラッパーが配置されるビューポート自体があり、添付ファイルのリスト。ここにはスライドがあり、その真ん中に img - 画像があります。 すべての画像が同じサイズまたは比例していなければならないという事実を尊重してください。そうしないと、スライダーが曲がって見えます。 そのサイズは画像の比率に基づいて決定する必要があります。

ここで右側のすべてをスタイル化する必要があるため、スタイルについては特にコメントしませんが、将来的に混乱が生じないよう、敬意を払うよう注意を払いたいと思います。

block-for-slider から始めましょう。繰り返しますが、これはスライダーの下に置く横のブロックです。その高さは幅と画像の比率に依存します。 ビューポートはスライダー用ブロックの幅全体を占め、スライド自体も同じ幅を持ち、当然のことながら、中央の画像は幅に応じて高さが変わります（比率は維持されます）。 この要素を中央で横に水平に移動し、100 ピクセルインデントして、お尻に使いやすい位置にしました。

すでに述べたように、ビューポート要素はスライダー用ブロックの幅全体を占めます。これには overflow:hidden の機能があり、ビューポートの範囲外に画像ラインをアタッチできるようになります。


ここで、CSS の力を利用します。user-select:none を使用すると、ボタンを複数回クリックしたときに周囲のスライダー要素を青色に表示できます。

では、 slidewrapper に移りましょう。なぜ、絶対ではなく、position:relativeなのでしょうか? それは簡単です、なぜなら... 別のオプションを選択した場合、パワー ビューポート オーバーフロー: hidden を使用すると、まったく何も得られません。 ビューポート自体はスライドラッパーの高さに調整されていないため、高さ:0 に設定します。 幅はなぜそれほど重要であり、なぜ常に幅を設定するのでしょうか? 右側では、スライドの幅はビューポートの 100% に等しくなります。線に沿ってスライドを間隔をあけて配置するには、スライドが立つ場所が必要です。そのため、スライドラッパーの幅はビューポートの 100% に等しくなければなりません。ビューポートの幅にスライド ブラシを掛けた値です (私が選んだのは 4)。 トランジションとトランジション タイミング関数があり、1 秒はスライドラッパーの位置の変更に 1 秒かかることを意味し、注意を払うことを意味します。イーズインアウトはアニメーションのタイプです。開始するときは中央を急いでください。 、スリープに戻ると、ここで値を当局に設定できるようになります。

当局の攻撃的なブロックはピンを設定し、その娘要素には入力がありません。アプリケーションのコメントは次のとおりです。

次に、スライドのスタイルを設定します。スライドの幅はビューポートの幅と同じでなければなりません。 スライドラッパーの幅がビューポートの幅にスライドの数を掛けたものと同じである場合、ビューポートの幅を再度取得するには、スライドラッパーの幅の 100% をスライドの数で割る必要があります (私の場合は、4）です。 その後、追加の display:inline を使用してそれらを小さな要素に変換し、 float:left にパワーを追加して悪の周りの流れを設定します。 list-style:none については、デフォルトのマーカー li を取得するために必要なオプションであると言えます。ほとんどの場合、それが標準です。

slide-img を使用するとすべてが簡単です。画像はスライドの幅全体を占め、スライドはその高さに合わせて調整され、Slidewrapper はスライドの高さに合わせて調整され、ビューポートの高さも同じ高さになります。スライドラッパーと同じなので、スライダーの高さは比例します。画像と寸法は次のスライダーの下にあります。これについては、すでに詳しく書きました。

こういったスタイルは決まったと思います、ボタンなしで簡単なスライドショーができて、その後できることを切り替えるとスタイルができるようになります。

js ファイルを開きます。スライダー コードが存在する場合は、jQuery を忘れずに含めてください。 この追加フレームワーク用に記述します。 お話しする前に、この記事を書いている時点では、私は jQuery 3.1.0 の vikory バージョンを使用しています。 スクリプトを含むファイル自体は body タグに含める必要があります。 最初に初期化する必要がある DOM 要素を処理します。

現時点では、いくつかの変更を発表する必要があります。1 つは、現在ビューポートで必要なスライドの番号を保存するものであり、それを slideNow と呼びます。もう 1 つは、これらのスライド自体の番号を保存するもの ( slideCount と呼びます) です。

slideNow 値を 1 に設定する必要があります。 レイアウトから出てくるページに興味がある場合は、ビューポートに最初のスライドが表示されます。

slideCount では、Slidewrapper の多数の子要素を収容できます。ここではすべてが論理的です。
次に、次のように、スライドを右から左に切り替える関数を作成する必要があります。

コードのメイン ブロックで呼び出すことができるので、その点に進みましょう。ここでは、関数に何をする必要があるかを伝えましょう。

まず最初に、ページの残りのスライドに何があるか確認してみましょう。 この目的のために、$("#slidewrapper").children().length を使用してすべてのスライドの番号を取得し、それをスライドの番号と一致させます。これらは等しいように見えるため、つまり、開始する必要があります。ページを再度表示します (1 スライド)。これは、 slidewrapper の translation(0, 0) の CSS 変換能力を変更して、最初のスライドがビューに表示されるように位置を変更することを意味します。 -webkit と - について忘れないでください。適切なクロスブラウザーレンダリングの場合は ms (css-powers を使用した div. .vidnik)。 この後、slideNow 変更の値を忘れずに更新して、スライド番号 1 が表示されていることを通知します。 slideNow = 1;

スライドの数の中に、おそらく該当するスライド番号があるかどうかを確認する必要があります。そうでない場合は、もう一度最初のスライドに戻ります。

最初のことが頭に入ってこないので、現在他のスライドにも他のスライドにも載っていないスライドについて話すことはできません。つまり、攻撃的なスライドに切り替える必要があります。 slidewrapper を width viewport に等しい値まで左にシフトすると、変位は既知の translation の力によって再び提供されます。その値は "translate(" + translationWidth + "px, 0)" に似ています。 translationWidth は、スライドラッパーがどのように移動するかを示す値です。 話す前に、この変更をコードの先頭に声に出してみましょう。

次のスライドに移動した後、次のスライドがもう 1 つあることを slideNow に伝えましょう: slideNow++;

現時点では、一部の読者は混乱しているかもしれません。スライドの幅を常に把握できるように、なぜ $("#viewport").width() を slideWidth のようなものに置き換えなかったのでしょう? 答えは非常に簡単です。私たちのサイトはアダプティブなので、当然、スライダーの下にあるビューのブロックもアダプティブです。したがって、ページのサイズを変更せずにウィンドウの幅を変更すると（たとえば、ページを回転させるなど）、それが理解できるでしょう。携帯電話を幅に合わせると)、ビューポートが変更され、明らかに 1 つのスライドの幅も変更されます。 この設定では、スライドラッパーはオリジナルと同じ幅に移動されます。つまり、画像はビューポートに部分的に表示されるか、まったく表示されません。 slideWidth の代わりに関数 $("#viewport").width() を記述することで、スキン上でスライドが切り替わったときにビューポートの幅を計算できます。これにより、画面の幅が突然変化したときに確実にスクロールできるようになります。必要なスライドに移動します。

関数を作成したら、前の 1 時間の間隔の後にその関数を呼び出す必要があります。また、コード値を 1 つだけ覚えて、必要に応じて変更できるように間隔をメモリに保存することもできます。

js 時間はミリ秒単位で示されます。

それでは、次の構造を書いてみましょう。

ここではすべてがこれ以上単純ではありません。$(document).ready(function()()) という構造を通して、ドキュメントのダウンロード後に削除する必要があるものについて話します。 次に、 setInterval 関数を追加して、 slideInterval に等しい間隔で nextSlide 関数を呼び出します。

これまでに実行したすべてのアクションの後、スライダーは奇跡的に回転するはずです。何か問題が発生した場合、問題は jQuery のバージョンか、ファイルの接続が間違っている可能性があります。 コードに間違いがある可能性があるため、オフにする必要もないので、すべてをもう一度確認するだけで済みます。


カーソルが置かれたときのスクロール バーなどの関数をスライダーに追加しましょう。この関数については、メイン コード ブロック ($(document).ready(function( ） （）） 構造：

このコードの分析を始めるには、switchinterval が何であるかを知る必要があります。 まず第一に、nextSlide 関数の定期的なクリックを保存することが重要です。見た目だけで、次の一連のコードを使用できます。 setInterval(nextSlide, slideInterval); 、Qiu に変更されました: switchInterval = setInterval(nextSlide, slideInterval); 。 これらの操作の後、コードのメイン ブロックは次のようになります。

ここでは、「ホバー中」を意味する hover メソッドを使用します。この機能を使用すると、ビューポート上のこのセクションでオブジェクトの上にカーソルを置いた瞬間を検出できます。

ホバリング後、腕に入力する間隔 (これが switchInterval です) をクリアし、カーソルを戻した場合に動作することを記述し、そのブロックで再び switchInterval に定期的なクリックを与えます。 nextSlide 関数の。

ここで確認できるように、カーソルのホバーやスライドのぎこちないシャッフルにスライダーがどのように反応するかが重要です。

戻るボタンと戻るボタンを含むボタンをスライダーに追加する時期が来ました。

まずそれらに注目してみましょう。

このマーキングは最初はばかげているかもしれません。すぐに言っておきますが、これら 2 つのボタンを prev-next-btns クラスを使用して 1 つの div にラップすることで、便宜上、誰にも迷惑をかける必要がなく、結果は変わりません。変更はありません。すぐにお知らせします。私にはスタイルがあり、すべてが変わります。それは明らかです。

まず、position:absolute を使用してボタンを配置し、ビューポートの中央でボタンの位置を自由に制御できるようにします。次に、これらのボタンのサイズを変更し、border-radius を使用してボタンが円になるようにボタンを丸めます。 色は白なので #fff 、ビューポートの上端の外観は、ビューポートの高さの半分からボタン自体の高さの半分を引いたものになります (私の外観は 25px)。このようにして展開できます。それらを中央に垂直に配置します。 次に、それらの上にマウスを置くとカーソルがポインターに変わり、ボタンを希望どおりに移動できるように、ボタンが端から 20 ピクセル突き出るように指示することを指示します。

繰り返しますが、ページの要素は好きなようにスタイル設定できます。また、私が参考として使用することを選択したこれらのスタイルの例も紹介します。

スタイルを設定すると、スライダーは次のようになります。


次に、js ファイルに戻り、ボタンのロボットを説明します。 さて、前のスライドに示されている関数をもう 1 つ追加しましょう。

これは prevSlide と呼ばれるもので、prev-btn をクリックした場合にのみ表示されます。 まず、最初のスライドにあるものを確認しましょう。ここでは、SlideNow が実際のスライド範囲の中で最良ではないことも確認します。そして、必要に応じて、残りのスライドに移りましょう。必要に応じて、SlideWrapper を配置します。私たちに。 値は次の式を使用して計算できます: (1 つのスライドの幅) * (スライドには 1)、すべてにマイナス記号を付けます。 左に移動して終了すると、ビューポートに残りのスライドが表示されます。 最後に、このブロックに、ビューに残りのスライドがあることを slideNow に伝える必要もあります。

最初のスライドにいない場合は、1 つ戻る必要があり、そのためにスライドラッパーの変換パワーを再度変更します。 式は次のとおりです: (1 つのスライドの幅) * (フロー スライドの数 - 2)、すべて同じで、マイナス記号を使用します。 なぜ -1 ではなく -2 なので、1 スライド戻る必要があるのでしょうか? 右側では、ご存知のとおり、たとえば 2 番目のスライドでは、Slidewrapper のtransform:translate(x,0) のパワーはすでに 1 つのスライドの幅に等しいため、フロー スライドの番号 1 の場合、SlideWrapper がすでにSlideWrapperをオフセットしているため、再び 1 つを削除します。これは、ビューポートの幅そのものであっても 0 だけオフセットする必要があり、slideNow - 2 でオフセットする必要があります。

これで、コードのメイン ブロックに行を追加する必要がなくなりました。

ここでは、ボタンをクリックすると必要な機能をクリックできることがわかります。すべてがシンプルかつ論理的です。

スライド ナビゲーション ボタンを追加しました。再びレイアウトに戻ります。

実際のところ、ビューポートの中央には添付ファイルのリストがあり、nav-btns 識別子があり、その中央にナビゲーション ボタンがあり、クラス slide-nav-btn があります。マークで攻撃を終了できます。スタイルは次のとおりです。

ボタンが配置されている nav-btns ブロックには、ビューポートの高さを拡張しないように powerposition:absolute が与えられています。 slidewrapper には Position:relative があり、幅は 100% 設定されているため、 text-align:center を使用してボタンを水平方向に中央揃えにして、ビューポートが 20px になるようにします。

ボタンはスライドと同じですが、表示: inline-block に設定している点が異なります。 display:inline では幅と高さに応答しません。 絶対位置のブロック内にあること。 色は非常に白く、すでにおなじみの境界線の半径に加えて、杭の形をしています。 それらの上にマウスを置くと、カーソルの外観を変更して視覚化できます。

それでは、jQuery の部分に取り掛かりましょう。
初めて、navBtnId を変更します。これにより、押したボタンのインデックスが保存されます。

ここで、スライド ナビゲーション ボタンをクリックすると、最初に変数 navBtnId をクリックされたボタンのインデックス (ゼロから始まるためシリアル番号) に割り当てる関数をクリックしてから、別のボタンを押します。次に、値が navBtnId 1 に書き込まれます。次に、そのような番号を削除するために、ボタンのシリアル番号に 1 を追加して、0 からではなく 1 から均等化します。番号をフロー スライドの番号に置き換えます。回避された場合、プロセスは実行されません。必要なスライドはすでにビューポートにあります。

必要なスライドがビューポートにない場合は、左側のスライドラッパーを分割し、変換する CSS 変換パワーの値を変更する必要があります (これ自体はピクセル、0 に設定されています)。 私たちはすでに何度も恥ずかしい思いをしているので、それは私たちのせいではありません。 最後に、フロー スライドの値が slideNow 変数に再度保存され、クリックされたボタンのインデックスに 1 を加算することで値を計算できます。

とにかく、まだ理解されていないことはすべて、資料に書かれたすべてのコードが提供される jsfiddle の投稿を削除します。

敬意を持っていただきありがとうございます!

タグ:

• jQueryスライダー
• css
• css3アニメーション
• html

これは、jQuery で書かれたアダプティブ タッチ スライダーです。 このプラグインのエンジンは CSS3 アニメーションを使用し、同時に古いバージョンのブラウザーのフォールバックを転送します。 Glide.js はシンプルで使いやすいです。

プラグインの唯一のコンテンツは jQuery であり、最初に含める必要があります。

基本的なスタイルが含まれています。

スライダーの HTML 構造を展開してみましょう。

調整に次ぐ調整からスライダーを打ち出します。

$(".slider").glide();

...それ以外は自分たちで修正します

$(".slider").glide(( autoplay: 5000, arrows: "body", nav: "body" )));

使用可能なパラメータのリスト:

vikoristan API の場合は、glide と書いて変更します。

Var glide = $(".slider").glide().data("api_glide");

API メソッドが利用できるようになりました。

Glide.jump(3, console.log("うわー!"));

• .current() - 現在の側の番号を回転します
• .play() - 自動スクロールの開始
• .pause() - Zupinity の自動スクロール
• .next(callback) - スライダーを前方に移動します
• .prev(callback) - スライダーを後ろに移動します
• .jump( distance, callback) - 前のスライドにジャンプします
• .nav(target) - ナビゲーションを曲要素にアタッチします (例: "body"、".class"、"#id")
• .arrows(target) - 単一の要素に矢印を付加します (例: "body"、".class"、"#id")。