私には才能がまったくありません。 私は知識に情熱を注いでいます

Article

28JavaScriptカルーセルスライダーライブラリ

28JavaScriptカルーセルスライダーライブラリ


October, 28 2021

今日の記事では、Webデザインと開発用のカルーセルライブラリについて理解します。

カルーセル

カルーセルは、閉ループで画像を簡単に表示して製品を強調表示し、ユーザーの注意を引くことができるスライダーです。 さらに、それはまたあなたのウェブサイトのためのスペースを節約することに貢献します。 基本的なカルーセルの構築はそれほど難しくありませんが、今日のWeb開発では、見た目に美しいカルーセルを作成し、より多くの機能を統合してユーザーエクスペリエンスを向上させる必要があります。 詳細については、下の図を参照してください。

Carousel

Owl Carousel 2

Owl Carousel 2は、カルーセルを簡単に、優れた美学で構築するのに役立つオープンソースライブラリです。 60を超えるカルーセル、モバイルタッチアンドドロップのサポートにより、複数のデバイス画面でユーザーエクスペリエンスと応答性が向上し、プロジェクトで使用する不要なプラグインが削減されます。 それは多くの有用な小さなモジュールに分解されます。 このライブラリで私が気に入っているのは、セットアップ、選択、ビデオでの使用、モーションエフェクトのカスタマイズを簡単にして、オートメーションなどのWebプロジェクトに適したカルーセルを構築できることです。各機能。 ..デモページで詳細を見ることができます。

Owl Carousel 2

Swiper

Swiperは、Githubで23,000を超えるスターレビューがあるオープンソースライブラリです。 ウェブサイト、モバイルアプリ、モバイルウェブアプリのモダンなデザインでスライダーをすばやく作成するのに役立ちます...また、さまざまなモーションエフェクトの使用などの他の便利な機能もあります。 豊富なAPIを使用すると、純粋なCSSを使用してSwiperのグリッドシステムを再定義できます。 読み込みの遅い画像を使用する...このライブラリについて私が見つけたのは、毎日のニーズを満たすために常に更新されているということです。 現在の最新バージョンはSwiper5.xです。 古いブラウザで使用したい場合は、Swiper2.xバージョンを使用できます。

Swiper

Slick

Slickは、カルーセルやスライダーを簡単に作成できる強力なパフォーマンスを備えたコンパクトなライブラリです。 javascript設定に加えて、HTMLのオブジェクトのdata-slick属性を使用してカルーセルを作成することもできます(この機能はバージョン1.5以降でのみ使用できます)。 さらに、イベントを使用したカルーセル内の要素のフィルタリング、追加または削除、1つ以上の要素の表示、モードの自動再生レベルなど、サイトカルーセルの作成プロセスを簡単に調整できるプロパティがあります。

Slick

Flickity v2.2

Flickity v2.2は、純粋なJavascript、Jquery、またはHTMLオブジェクトプロパティを使用してセットアップした、Webサイトのカルーセルとスライダーを簡単に作成できるライブラリです。 flickity.min.cssファイルのプロパティを変更して、カルーセルのスタイルを設定することもできます。 他のライブラリと同様に、ドラッグアンドドロップのアクセス許可、要素をさまざまなグループにグループ化する、ユーザーがクリックしたときの全画面表示など、カルーセルを簡単に調整できるプロパティがあります。 エレメント...

Flickity v2.2

Tiny slider

Tiny Sliderは、フクロウのカルーセルに着想を得たライブラリで、ウェブサイトのカルーセルとスライダーに高い美学を備えたコンパクトで機能的なカルーセルを構築するのに役立ちます。 タップアンドドラッグ、低速読み込み、垂直カルーセル表示、カルーセルベースの要素配置の選択など、簡単に調整できる多くの機能とプロパティがあります。 各機能の例は、デモページにあります。

Tiny slider

Lory

Loryは、純粋なJavascriptで記述されたライブラリであり、Webサイトで構成できる多くのオプションを備えた単純なカルーセルを作成するのに役立ちます。 通常の設定に加えて、CDNを使用してHTMLページで直接使用できます。 また、開発中にwebpack、babel、eslintで使用することもできます。 デモページで、設定、プロパティ、および機能を使用してカルーセルを改良する方法に関するすべての例を見つけることができます。

Lory

Siema

シーマは、シンプルなカルーセルの作成に役立つわずか約3kb(圧縮)のコンパクトなライブラリですが、モーションエフェクトの選択、ページあたりの要素数の設定、プル機能の保証などの完全な機能を備えています...最新のもののみをサポートします機能ブラウザ。 さらに、ライブラリは、Angular、React、Vueなどの今日人気のあるフロントエンドフレームワーク用のカルーセルの作成もサポートしています(これは[その他のデプロイ]セクションで確認できます)。

Siema

JQuery lightSlider

JQuery lightSliderは、カルーセルの作成に役立つコンパクトなオープンソースライブラリです。 スライダーとナビゲーションバーを組み合わせて、ユーザーがカルーセル内の要素に簡単に移動できるようにします。 このライブラリの長所のいくつかは、さまざまなデバイス画面でのレスポンシブディスプレイ、電話でのスワイプのサポート、キーボードを介したカルーセルナビゲーション、画像、ビデオ、Googleマップなどのさまざまなコンテンツのサポートです。

JQuery lightSlider

Simple-slider

Simple-sliderは、Javascriptで構築されたライブラリで、約1.2kb(圧縮)です。 豊富なドキュメントと各機能の詳細な例があり、Webサイトの目的に合わせてカルーセルを簡単にカスタマイズできます。 さらに、APIを使用してメソッドとプロパティを設定し、遅延時間の定義、カルーセルで使用される子コンポーネントの定義、使用されるカルーセルのCSS値(「デフォルト値」)の設定など、カルーセルをより細かく制御できます。 )..。

Simple-slider

Embla Carousel

Embla Carouselは、CSSとJavascriptで記述されたコンパクトなライブラリであり、Webサイトのカルーセルとスライダーをすばやく作成できます。 追加のライブラリが使用されていないため、Webサイトのパフォーマンスの最適化も非常に高くなります。 さらに、ドラッグ(ドラッグまたはスワイプ)の使用の許可、カルーセル内の繰り返し要素の識別、カルーセル内の要素の配置など、微調整に役立つ多くのプロパティがあります。

Embla Carousel

Slider Pro

Slider Proは、Jqueryで構築されたオープンソースライブラリであり、カルーセルとスライダーをナビゲーションバーと簡単に組み合わせることができます。 それはあなたのウェブサイトに簡単に適用できるようにするいくつかのユニークなレイアウトを持っています。 さらに、Slider Proは、カルーセルまたはモバイルデバイスのフルスクリーンモードをスワイプすることで、さまざまなデバイス画面に表示できます...

Slider Pro

Glider.js

Glider.jsは、slick.jsに触発されたオープンソースライブラリです。 目標は、追加のライブラリを使用せずにすばやく相互作用する軽量でコンパクトなカルーセルとスライダーを作成することです。 測定値は約2.8kb(圧縮後)で、カルーセルの作成には約25秒かかります。 それとは別に、拡張性の容易さ、カスタマイズ、複数のデバイスでのレスポンシブディスプレイ、フレックスボックスのサポート、キーボードベースのカルーセル操作、スライダーなどの他の利点もあります。 詳細については、デモページを参照してください。

Glider.js

Timeline.js

Timeline.jsは、タイムイベントを表示するカルーセルとスライダーをすばやく簡単に作成するのに役立つオープンソースライブラリです。 カルーセルの微調整、自動再生などのスライダー、横向きまたは縦向きの表示モードの選択、ユーザーがマウスを置いたときにタイムラインを停止するのを簡単にする多くのプロパティがあります...

Timeline.js

ItemSlide.js

ItemSlide.jsは、JavaScriptで構築されたソースコードライブラリであり、Webサイトのカルーセル、スワイプ、スクロールスライダーを簡単に作成するのに役立ちます。 主に携帯電話やタブレットデバイスのディスプレイに焦点を当てています。 わずか約10kbのサイズで、ユーザーが要素をスワイプしたときの感度の決定、カルーセル内の要素を表示する時間、ユーザーが要素をクリックできないようにするなど、カルーセルの多くのカスタム機能を保証します。 ...これは、参考のためにドキュメントセクションで詳細を見ることができます!

ItemSlide.js

Turntable.js

Turntable.jsは、Jqueryで構築されたライブラリであり、カルーセルをわずかに異なる方法で作成し、製品表面の詳細な画像を介して3Dでレンダリングし、マウスポインターで調整するのに役立ちます。 )。 オープンソースであるため、あらゆる種類のWebプロジェクトに使用できます。

Turntable.js

VueJS用のいくつかのスライダー、カルーセルライブラリ

vue-awesome-swiper
Vue Carousel
vue-agile
vue-concise-slider
 Vue Carousel 3D

ReactJS用のいくつかのスライダー、カルーセルライブラリ

REACT IMAGE GALLERY
React Responsive Carousel
Pure React Carousel
REACTAWESOME SLIDER
React slider

他のいくつかのJavascriptスライダーとカルーセルライブラリ

Glide
Skippr
FSVS

概要:

この記事がカルーセルとスライダーの便利なライブラリを提供することを願っています。 ご不明な点がございましたら、メールにてお問い合わせください。 お早めにご連絡いたします。 より良い記事を書くことができるように、ページをサポートし続けてください。