タッチデバイスも完全サポート！さまざまなスライダーをシンプルなコードで実装できる軽量JavaScript -Tiny slider

サイト構築 -JavaScript

Post on:2019年7月17日

Tiny Sliderの特徴

Tiny SliderはOwl Carouselにインスパイアされた、多目的用の軽量スライダーを実装するJavaScriptです。MITライセンスで、商用のプロジェクトでも無料で利用できます。

シンプルなスライダーも下記のようなアニメーションを使ったスライダーも、非常に簡単なコードで実装できます。

多目的用のスライダー: シンプルなスライダーから、変わったスライダーまで簡単に実装できます。
高機能なスライダー: 自動再生、ループ再生、Lazyload、コントーローラーなどをサポート。
アクセシブル: マウス操作、キーボード操作、タッチデバイス、スクリーンリーダーに対応。
スマホもサポート: スマホでの表示・操作も完全にサポート。
実装もカスタマイズも簡単: HTMLは非常にシンプル、外部ファイルと数行のコードで実装できます。

サポートブラウザ

すべてのモダンブラウザ
IE 8+もサポート

スライダーは、スマホのタップ・スワイプ操作にも対応しています。

Tiny sliderをスマホで表示

Tiny Sliderのデモ

デモでは、Tiny Sliderで実装できるスライダーを楽しめます。

Tiny Slider デモページ

左のパネルにあるように、さまざまなスライダーが用意されています。

Tiny Sliderの使い方

Step 1: 外部ファイル

当スタイルシートを外部ファイルとして、記述します。
必要に応じて、IE 8用のポリフィルを加えてください。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.1/tiny-slider.css">
<!--[if (lt IE 9)]><script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.1/min/tiny-slider.helper.ie8.js"></script><![endif]-->

1 2	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.1/tiny-slider.css"> <!--[if (lt IE 9)]><script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.1/min/tiny-slider.helper.ie8.js"></script><![endif]-->

Step 2: HTML

スライダーはdiv要素、またはリストで実装します。親要素にはclassを付与します。

<div class="my-slider">
  <div></div>
  <div></div>
  <div></div>
</div>

or

<ul class="my-slider">
  <li></li>
  <li></li>
  <li></li>
</ul>

</div>

</ul>

Step 3: JavaScript

当スクリプトを外部ファイルとして記述し、スクリプトを実行します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.1/min/tiny-slider.js"></script>

<script type="module">
  import {tns} from './src/tiny-slider.js';

  var slider = tns({
    container: '.my-slider',
    items: 3,
    slideBy: 'page',
    autoplay: true
  });
  </script>