Lory Carousel Sliderの機能CSSアニメーションとタッチのサポート

すべてのうち カルーセルプラグインオンライン 私は私の帽子をひっくり返さなければなりません ロリー. それはそのようなものです 単純な概念 しかし、それは簡単に 最も強力なスライダー ウェブ上で.

の 縮小版 合計で7KBほどありますが、これは小さくはありませんが、確かに タッチ対応のカルーセルスライダーには悪くない.

あなたはそれ以来それをあらゆるウェブサイトにこのプラグインを追加することができます jQueryまたは普通のJSで動作します。. それはと動くことができます 依存関係なし これは互換性に優れています.

Loryもその数少ないプラグインの1つです。 古いブラウザでは劣化しない. それは IE10で完全サポート+, 古いバージョンでもスライダーを動かすことができます。 アニメーションとちょっとした追加物なしで.

あなたがする必要があります プログラムによるコーディングをすべて自分で行う コンテンツを追加したいがそれが 驚くほど簡単. 各パネルの大きさ、アニメーションの長さ、レスポンシブブラウザの処理方法を定義できます。.

Loryのホームページをチェックしてください。 ソースコード そして セットアップの詳細.

Lory JSライブラリを追加することから始めます あなたのサイトへ 頭 セクション, jQueryプラグインまたはバニラライブラリとして。すべてのバージョンは現在 Cloudflare CDNでホストされている, だからダウンロードせずにコピーを含めるのはとても簡単です.

JavaScriptファイルをインストールしたら、スライドの内容を含むHTML順不同リストを作成しますが、Lory いくつかの定義済みクラスが付属しています それはいい 彼らのモデルに固執する.

ここにいくつかあります サンプルコード メインのLory GitHubリポジトリから抜粋したものです。

今jQuery（またはプレーンなJS）で、あなたはすることができます 関数呼び出しを設定する. これは次のようになります。

 $（ '。js_slider'）。lory（infinite：1）;

に注意してください 無限 オプションは、カスタマイズできる多くの機能のうちの1つです。そしてあなたはいつでも変更することができます .js_slider あなたのニーズに合ったクラス.

このプラグインを使って開発している間は、カスタマイズに関する質問が山ほどあります。私は強くお勧めします ドキュメントを閲覧する GitHubページの一番下にあります。.

おそらくドキュメントにとって最良の場所ではありませんが、ありがたいことにそれらはかなり小さいです。あなただけがいる 約10オプション カスタマイズして多分 10-12の異なるイベント あなたはいじけることができます。この情報はLory Webサイトの下部にもありますが、GitHubで読むのがはるかに簡単です。.

更新はそれほど頻繁ではありませんが、いつでもできます 発行依頼を記入する GitHubで問題に遭遇したら本当にコードに問題があるのなら、おそらくStack Overflowでもっと簡単に解決できるでしょう。.

どちらにしても、 かなり早く始める Cloudflare CDNとGitHubドキュメントを使用してください。そしてあなたが探しているなら コード付きのライブデモ このCodePenエントリをチェックしてください.