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

デスクトップ・タブレット・スマホをサポート、シンプルなスライダーをはじめ、さまざまなスライダーを簡単に実装できる軽量JavaScriptを紹介します。

バニラJSで実装されており、他のライブラリへの依存はなく、単体で動作します。
HTMLは非常にシンプルで、外部ファイルと数行のコードで実装できます。

サイトのキャプチャ

Tiny Slider -GitHub

Tiny Sliderの特徴

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

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

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

サポートブラウザ

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

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

サイトのキャプチャ

Tiny sliderをスマホで表示

Tiny Sliderのデモ

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

デモのキャプチャ

Tiny Slider デモページ

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

デモのキャプチャ

Fixedwidth

デモのキャプチャ

Vertical

デモのキャプチャ

Mouse Drag

デモのキャプチャ

Lazyload

Tiny Sliderの使い方

Step 1: 外部ファイル

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

Step 2: HTML

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

Step 3: JavaScript

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

親要素のclassを定義し、アイテム数とスライダーのタイプを定義します。

sponsors

top of page

©2019 coliss