Webサイト制作にあたりスライダー系の演出は必須といっても過言ではないです。
そこでおすすめのJavaScriptスライダープラグイン23選をご紹介します。
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の使い方：スクロールとカーソル移動で複数画像を切り替える方法
crawler.js
テキストや画像を水平に自動スライドすることができます。
crawler.jsを使ってテキストや画像を水平に自動スライドする方法
fullPage.js
ページ全体を滑らかにスクロールさせたり、視覚的なインパクトを持たせたい場合に役立ちます。
シンプルでありながら視覚的に魅力的なウェブページを手軽に作成することができます。
fullPage.jsを使った全画面スクロール・スライダー演出
これらのプラグインは、スライダー要素をウェブページに簡単に追加するための選択肢です。
プロジェクトの要件やデザインに合わせて最適なプラグインを選んでください。また、使用する際には公式ドキュメントを参照して適切に設定やカスタマイズを行うことをおすすめします。
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。
