Webサイト制作にあたりスライダー系の演出は必須といっても過言ではないです。
そこでおすすめのJavaScriptスライダープラグイン22選をご紹介します。
Slick.js
カスタマイズ可能なカルーセル型スライダー。レスポンシブデザインに対応し、多彩なオプションを提供しています。
複数画像スライダープラグイン【slick.js】
slick.jsを使ってmp4とYouTube動画をスライド表示する方法
slick.jsを使って画像を徐々に拡大させながら切替表示する方法【jQuery】
Swiper.js
レスポンシブでタッチ対応のスライダー。カルーセル、スライドショー、カード表示など様々なスタイルに対応しています。
レスポンシブ対応の複数画像スライダープラグイン【Swiper.js】
Owl Carousel
レスポンシブでカスタマイズ可能なカルーセルスライダー。タッチ対応やアニメーションオプションなども豊富です。
タッチ、スワイプ、マウスホイール、レスポンシブに対応したスライダーOwl Carousel 2【jQueryプラグイン】
Glide.js
シンプルながらもカスタマイズ可能なスライダーライブラリ。レスポンシブデザインに対応しており、多くのトランジションオプションが利用できます。
Glide.jsプラグインを使ってスライダー表示
bxslider.js
レスポンシブ、トランジションエフェクト、自動再生、タッチスワイプ等に対応した汎用的なスライダー。
汎用的スライダーjquery.bxslider.jsを使って複数画像スライダーを表示する方法
ItemSlide.js
上下左右スワイプ対応のモバイルフレンドリーなスライダー。上下左右スワイプ、スクロール、クリックするとスライドできます。
itemslide.jsを使って上下左右スワイプ対応のモバイルフレンドリーなスライダーを表示する方法
lightSlider.js
カスタマイズ可能なスライダーギャラリーを実装するためのjQueryプラグイン。画像、テキスト、ビデオなどのコンテンツをスライドショー形式で表示できます。
軽量スライダーlightslider.jsを使ってスワイプに対応した複数画像スライドギャラリーを表示する方法
Splide.js
軽量で高性能なスライダーライブラリであり、スライドショーやカルーセルを簡単に実装。モダンなウェブ開発に適した特徴を備えており、jQueryに依存しない純粋なJavaScriptのライブラリ。
Splide.jsを使ってスワイプやタップに対応したスライダーを表示する方法
Slider Pro
高度なカスタマイズと多機能なスライダーギャラリーを実装するためのjQueryプラグイン。画像、ビデオ、HTMLコンテンツなどをスライドショーとして表示できます。
jquery.sliderPro.jsを使ってレスポンシブに対応した縦横スワイプでスライド可能な画像スライダー
Tiny Circleslider
jQueryベースの軽量な円形のスライダープラグイン。画像やコンテンツを円形に配置し、ユーザーがスライドして切り替えることができます。
jquery.tinycircleslider.jsを使ってサークル（円）状に複数画像スライダーをコントロール表示する方法
Unslider.js
シンプルで軽量なスライダープラグイン。画像やコンテンツをスライドショー形式で表示できます。
unslider.jsを使ってクリーンで柔軟なjQueryコンテンツスライダーを表示する方法
GalleryView.js
画像やコンテンツのギャラリーを表示するためのjQueryプラグイン。美しいスライドショーとギャラリーを作成することができます。
jquery.galleryview.jsを使って複数画像をギャラリー＆スライダー表示する方法
Nivo Slider
画像やコンテンツを美しいスライドショーとして表示するためのjQueryプラグイン。スライドショーにトランジション効果を適用することができ、多くのアニメーション効果やカスタマイズオプションを設定できます。
複数画像を色々なエフェクトで切替表示する方法【jquery.nivo.slider.js】
FlexSlider
レスポンシブデザインに対応したスライダーギャラリーを実装するためのjQueryプラグイン。画像やコンテンツをスライドショー形式で表示し、デバイスや画面サイズに合わせて自動的に調整することができます。
jquery.flexslider.jsを使ってスワイプ（swipe）に対応した画像スライダーを表示する方法
jCarouselLite
軽量でシンプルなjQueryプラグイン。画像やコンテンツをカルーセル形式で表示できます。
複数画像を左右にスライドしながらカルーセル表示する方法【jcarousellite.js】
Roundabout.js
カルーセルやスライダーの実装を目的としたjQueryプラグイン。要素を円形に配置することでスライド効果を実現します。画像やコンテンツが円環状に配置され、ユーザーが前後にナビゲートする際に要素が回転するようなアニメーション表示できます。
liタグ要素を色々な種類の回転で表示する方法【jquery.roundabout.js、jquery.roundabout-shapes.js】
carouFredSel
高度なカスタマイズ性と機能を提供する、強力なjQueryスライダープラグイン。画像やコンテンツをスライドショー形式で表示し、複数のスライダーのカルーセル（連続回転）表示やページネーションなど、多くのコンポーネントを実装できます。
複数サムネイルの左右スライドショーを表示する方法【jquery.carouFredSel】
jquery.galleryslider.js
複数画像をマウスカーソル位置によってフルスクリーン縦スライドできるプラグイン。複数画像を縦列に表示しマウスカーソルを上下するとマウスカーソル位置によって画像が上下に縦スライドできます。
【簡単設置】複数画像をマウスカーソル位置でフルスクリーン縦スライドする方法【jquery.galleryslider.js】
easySlider
jQueryベースのスライダープラグイン。画像やコンテンツをスライドショーとして表示できます。
easySlider.jsを使って簡単に複数画像のスライド表示を導入する方法
TouchSlider.js
モバイルデバイスやタッチスクリーンでの操作に特化したスライダープラグイン。画像やコンテンツを指でスワイプして切り替えることができます。
jquery.touchslider.jsを使ってタッチスライド（スワイプ）で複数画像を左右にスライドする方法
Turntable.js
360度回転するアニメーションを実現するためのJavaScriptライブラリ。マウスドラッグやタッチスワイプを使用してアイテムを回転させることができ、製品の詳細をさまざまな角度から確認することができます。
turntable.jsを使ってスクロールまたはXY軸カーソル移動で複数画像を切替え表示する方法
crawler.js
テキストや画像を水平に自動スライドすることができます。
crawler.jsを使ってテキストや画像を水平に自動スライドする方法
これらのプラグインは、スライダー要素をウェブページに簡単に追加するための選択肢です。
プロジェクトの要件やデザインに合わせて最適なプラグインを選んでください。また、使用する際には公式ドキュメントを参照して適切に設定やカスタマイズを行うことをおすすめします。
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。
