カルーセルスライダーは、複数の画像や動画、コンテンツを省スペースに効率よく表示できます。シンプルで使いやすいカルーセルスライダーは、ウェブサイトのユーザーエクスペリエンスを向上させ、視覚的にも目をひくコンテンツとして掲載することができます。
この記事では、使い勝手のいいカルーセルスライダーを紹介します。全てレスポンシブサイトに対応しているのでスマホ表示もOKです。
jQuery不要で設置できるカルーセルスライダー
jQueryに依存しないピュアjavascript製のライブラリです。
Swiper – スマートなタッチスライドでモバイルに最適

カルーセルスライダーで最も人気があるJavaScriptライブラリではないでしょうか。モバイルファーストをコンセプトに開発されたため、モバイル端末の操作性に最適化されています。
- jQueryに依存しない
- レスポンシブ対応でタッチスライドに特化
- アニメーション種類が豊富で、スムーズな操作感
- 自動再生、ループ、ナビゲーション機能など豊富な機能
- CSSやJavaScriptでスタイルや動作をカスタマイズできる
- 複数のスライダーを同時に操作することができるため、複雑なレイアウトを実現できる
- スライダーコンテンツには画像や動画だけでなく、任意のHTML要素を自由に配置できる
Swiperの設置方法を詳しく解説した記事も併せてご覧ください。
Spilde – 軽量スライダー・日本語ドキュメントあり

タッチスワイプ対応、レスポンシブに最適化されたスライダーライブラリ。日本語のドキュメントがあるのがありがたいです。
- TypeScript製
- 依存関係なし
- 軽量29kB (圧縮後12kB)
- フレキシブルで拡張性が高い
- CSSによるスライド、フェード遷移
- レスポンシブ対応
- プログレスバー、自動再生
- RTLと垂直方向対応
- マウスドラッグ、タッチスワイプ対応
- 幅と高さの自動調整
- アクセシビリティフレンドリー
- IE10対応
使い方
スクリプトの読み込み
CDN
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css" rel="stylesheet">
NPMやgithubからパッケージをダウンロードして、必要なスタイルだけ適用することもできます。
基本的なマークアップHTML
公式サイトにはスライダーを配置する用途や場所によってマークアップを変えることを推奨されています。
またARIA属性を使用してスクリーンリーダー にも認識され正確にスライダーの機能を説明するようにするなどアクセシビリティを意識して開発されています。
<section class="splide" aria-label="XXXの商品画像リスト">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">スライド 1</li>
<li class="splide__slide">スライド 2</li>
<li class="splide__slide">スライド 3</li>
</ul>
</div>
</section>
スクリプトの適用
スライドのラッパー.splideを指定してスクリプトを実行します。
<script>
new Splide( '.splide' ).mount();
</script>