この記事の要点

現在の定番は Swiper.js（タッチ・モバイル対応・依存なし） 昔ながらの選択肢: Slick.js（jQuery 必須） / jQuery UI Slider（つまみ型） 自前実装は touchstart / touchmove / touchend + transform: translateX() の組み合わせ オプション: autoplay / loop / pagination / navigation / effect:"fade" フレームワーク版: Vue Awesome Swiper / swiper/react / react-slick

JavaScript スライダーの選択肢

ライブラリ	特徴	サイズ
Swiper.js	依存なし、タッチ最適化、超多機能	140KB（gzip 40KB）
Slick.js	jQuery 必須、レガシ案件に多い	40KB + jQuery
Glide.js	軽量、依存なし	30KB
Splide.js	アクセシビリティ重視	50KB
jQuery UI Slider	つまみ型（カルーセルでなく値選択）	jQuery UI

Swiper.js（推奨）

2026 年現在、新規実装は Swiper.js 一択と言って良いほど。CDN ですぐ使えます:

Swiper の主要オプション

オプション	説明
slidesPerView	同時に表示するスライド数（複数表示）
spaceBetween	スライド間の余白 (px)
loop	無限ループ
autoplay	自動再生 { delay: 3000 }
effect	slide / fade / cube / coverflow / flip / creative
breakpoints	レスポンシブ別オプション
centeredSlides	中央寄せ
lazy	画像遅延読み込み

レスポンシブ対応

new Swiper('.swiper', {
    slidesPerView: 1,
    spaceBetween: 10,
    breakpoints: {
        640:  { slidesPerView: 2, spaceBetween: 20 },
        768:  { slidesPerView: 3, spaceBetween: 30 },
        1024: { slidesPerView: 4, spaceBetween: 40 },
    },
});

CSS カスタマイズ

/* ページネーションの bullet を四角に */
.swiper-pagination-bullet {
    width: 20px;
    height: 4px;
    border-radius: 0;
    background: #ccc;
    opacity: 1;
}
.swiper-pagination-bullet-active {
    background: #ff6b6b;
}

/* prev/next ボタンの色 */
.swiper-button-prev,
.swiper-button-next {
    color: #ff6b6b;
    --swiper-navigation-size: 28px;
}

/* スライド画像をはみ出さない */
.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

React で使う（swiper/react）

import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Pagination, Autoplay } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

export default function Carousel({ items }) {
    return (
        
            {items.map(item => (
                
                    
                
            ))}
        
    );
}

Vue で使う（vue-awesome-swiper / swiper/vue）

Slick.js（レガシ案件向け）

自前実装（依存なし）

ライブラリを使いたくない場合の最小実装:

jQuery UI Slider（値選択用つまみ）

「スライダー」でも値を選ぶつまみ型 UIを作りたい場合はこちら:

// HTML: 
 

$('#amount-slider').slider({
    min: 0,
    max: 1000,
    step: 10,
    value: 500,
    slide: function(event, ui) {
        $('#amount').val(ui.value);
    },
});

FAQ

Q: Swiper の loop で重複コンテンツが SEO に悪影響しない？
A: 内部的にクローンを aria-hidden="true" で複製しているだけで、Googlebot は実体を 1 つと認識します。

Q: アクセシビリティ的にスライダーは推奨される？
A: 自動再生はユーザーの注意を奪うため、停止ボタン必須・prefers-reduced-motion 尊重・キーボード操作対応が WCAG 推奨です。

Q: 画像が大量で遅い
A: Swiper の lazy オプションで遅延読み込み。または loading="lazy" 属性を画像に付与。