tiny sliderを実装する方法｜現在の入手先と代替ライブラリも

Webページにスライダーを実装する方法として、tiny slider の導入と実装手順を解説します。

結論から書くと、tiny slider は今も動きますが、これから新規に選ぶなら Swiper か Splide を検討してください。tiny slider は最終リリースから約5年が経ち、公式サイトも現在つながりません。

▼2026年時点の選択肢

既存サイトに tiny slider が入っている場合や、すでに書いたコードを保守する場合にはこの記事の内容がそのまま使えます。以下、導入と実装を解説します。

tiny sliderとは

tiny sliderは、軽量で高機能なスライダーライブラリです。画像、テキスト、動画など、さまざまなコンテンツをスライドとして表示することができます。また、レスポンシブデザインにも対応しており、モバイルデバイスでも見栄え良く表示することができます。

tiny sliderの実装 基本編

1. tiny sliderのダウンロードとインストール

かつて案内されていた公式サイト（tinyslider.com）は現在つながりません。入手先は GitHub か npm、または CDN を使ってください。

CDNで読み込むのがいちばん手軽です。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/min/tiny-slider.js"></script>

npmから入れる場合はこちらです。

npm install tiny-slider

ソースを直接置きたい場合は、GitHubのリポジトリから dist の中の tiny-slider.css と tiny-slider.js を取得して、HTMLファイルと同じディレクトリに配置します。

2. HTMLマークアップの準備

HTMLファイル内に、スライダーを表示したいコンテンツを以下のようにマークアップします。

<div class="slider">
  <div class="slide">スライド1のコンテンツ</div>
  <div class="slide">スライド2のコンテンツ</div>
  <div class="slide">スライド3のコンテンツ</div>
  <!-- 追加のスライドを記述 -->
</div>

3. CSSスタイルの適用

スライダーのスタイルを適用するために、以下のCSSをHTMLファイルに追加します。

/* 例：基本のスタイル */
.slider {
  display: block;
  width: 100%;
}

.slide {
  width: 100%;
}

4. JavaScriptの初期化

tiny sliderを使用するために、JavaScriptでスライダーを初期化します。以下のコードをHTMLファイル内のscriptタグに追加します。

<script src="path/to/tiny-slider.js"></script>
<script>
  const slider = tns({
    container: '.slider',
    // オプションを指定
  });
</script>

tiny sliderの実装 応用編

1. カスタムナビゲーションの追加

tiny sliderではデフォルトでナビゲーションが表示されますが、独自のデザインにカスタマイズしたい場合もあります。それを実現するには、以下の手順を追加します。

<!-- HTML -->
<div class="slider">
  <!-- スライドのコンテンツ -->
</div>
<div class="custom-controls">
  <button data-controls="prev">前へ</button>
  <button data-controls="next">次へ</button>
</div>

/* CSS */
.custom-controls {
  text-align: center;
}

.custom-controls button {
  margin: 5px;
}

// JavaScript
const slider = tns({
  container: '.slider',
  controlsContainer: '.custom-controls',
});

2. レスポンシブ設定

tiny sliderはレスポンシブデザインにも対応しています。デバイスの幅に応じて表示を変えるには、breakpointsオプションを使用します。

const slider = tns({
  container: '.slider',
  responsive: {
    640: {
      items: 2,
    },
    768: {
      items: 3,
    },
    1024: {
      items: 4,
    },
  },
});

これから作るなら何を使うか

結論：スライダーを新しく実装するなら Swiper か Splide、単純な横スクロールで足りるなら CSS の scroll-snap を検討してください。

tiny slider の最終リリースは 2.9.4 で、そこから約5年が経過しています。動かなくなったわけではありませんが、不具合が見つかっても修正される見込みは薄い状態です。

アクセシビリティを重視するなら Splide です。W3C が定めたカルーセルのARIAパターンに標準で従っている数少ないライブラリで、キーボード操作とスクリーンリーダーへの対応が最初から入っています。

機能の幅で選ぶなら Swiper です。3D効果、仮想スライド、ズームなど対応範囲が広く、各フレームワーク向けの実装も用意されています。

ライブラリを入れずに済ませたい場合は、CSSの scroll-snap で足りることも多いです。

.slider {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

これだけで、指やトラックパッドでスワイプすると1枚ずつ止まる横スクロールになります。自動再生や矢印ボタンが要らないなら、これがいちばん軽く済みます。

gap の使い方はgapプロパティでflexboxやgridに余白を入れる方法にまとめています。

tiny slider で中央の要素だけ大きくする方法はtiny sliderの真ん中の要素を大きくするで解説しています。

▼HTML/CSS/JavaScriptの学習本を探してる方はこちらの記事をどうぞ

まとめ

この記事では、tiny sliderの導入と実装方法について解説しました。tiny sliderは、軽量で高機能なスライダーライブラリで、画像、テキスト、動画など、さまざまなコンテンツをスライドとして表示することができます。ぜひWebページにtiny sliderを実装してみてください。