no-image

JavaScript

レスポンシブ対応の超軽量なjQueryイメージスライダー「tinyslide」

tinyslideはレスポンシブに対応した超軽量なイメージスライダーを実装できるjQueryプラグインです。jQuery・CSS3が使われています。フルスクリーンによるダイナミックなスライダーを実装したい人に最適ですね。

tinyslide

tinyslide

デモではフルスクリーンで表示された迫力ある画像がスライドしていく様子を見ることができます。シンプルながらも下部にはナビゲーションも用意されていて、ここから現在表示中の画像をチェックできたり画像を切り替えたりといったことが可能です。

また、キーボードにも対応しているので左右の矢印キーから画像を前後移動することもできます。

レスポンシブということで、パソコンからの閲覧だけではなくスマホやタブレットなど多彩なデバイスで見やすいのがいいですね。

自動再生やアニメーションデュレーションの調節などはオプションから設定できるようになっています。

主なオプションは、autoplay、animationDuration、hoverPause、slide、slideWrapper、slides、thumbs、thumb、debug、showNavigator、beforeTransition、afterTransitionです。ちなみに、autoplayのデフォルト値は4000、animationDurationは800、hoverPauseはtrueに設定されています。

というわけで、超軽量でレスポンシブに対応したフルスクリーンによるイメージスライダーを実装できる「tinyslide」の紹介でした。

swipe-menu-js横からスライド・スワイプ表示するハンバーガーメニュー実装「swipe-menu-js」前のページ

かっこいいニュース・バナースライドショー実装「jQuery News Slider」次のページno-image

関連記事

  1. Captall

    JavaScript

    画像やDOM要素の上にキャプションを表示することができるjQueryプラグイン「Captall」

    CaptallというjQueryプラグインを使えば、画像や設定したDO…

  2. Timeline.js

    JavaScript

    スライド式のタイムラインを実装できるjQueryプラグイン「Timeline.js」

    Timeline.jsは、スライド式によるタイムラインを実装することが…

  3. jQueryTween

    JavaScript

    軽量で軽快なアニメーションをするjQueryプラグイン「jQueryTween」

    jQueryTweenは軽量で軽快なアニメーションを実装することができ…

  4. no-image
  5. crossfade.js

    JavaScript

    スクロールで画像をクロスフェードできるjQueryプラグイン「crossfade.js」

    crossfade.jsというjQueryプラグインを使えば、スクロー…

  6. Albumize

    JavaScript

    アルバムみたいな画像コレクションのギャラリーを管理・実装できるjQueryプラグイン「Albumiz…

    Webページにある画像コレクションをアルバムのようなギャラリーに管理・…

最近の記事

  1. すしざんまい
  2. 蒼龍唐玉堂 特製牛バラ担々麺
  3. サーモンアボカドサラダラップとドリップ
  4. 猿田彦フレンチ
  5. Zarigani Curry 挽肉のカレー ゴーダチーズとピクルスを添えて

アーカイブ

PAGE TOP