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. Page Stack Navigation

    JavaScript

    ページをスタッキングできる「Page Stack Navigation」

    Page Stack Navigationはページをスタッキングできる…

  2. jQuery Equal Height

    JavaScript

    異なる要素の高さを揃えてくれる「jQuery Equal Height」

    jQuery Equal Heightは、異なる要素の高さをキレイに揃…

  3. swingdrag

    JavaScript

    jQuery UIのドラッグ機能にスイング効果を加えることができる「swingdrag」

    swingdragは、jQuery UIのドラッグ機能にスイング効果を…

  4. percircle

    JavaScript

    カスタマイズもできるパーセンテージのサークル実装「percircle」

    percircleはCSSによるパーセンテージのサークルを実装できるj…

  5. Validatr

    JavaScript

    HTML5のinput属性による検証ができるフォーム実装「Validatr」

    Validatrは、HTML5のinput属性を用いて検証できるさまざ…

  6. jQuery Sequency js

    JavaScript

    スクロールでビフォー・アフター画像を見比べれる「jQuery Sequency js」

    jQuery Sequency jsはスクロールでビフォー・アフター画…

最近の記事

  1. ダミアン・ハースト 桜
  2. パッキングエリア
  3. あらびきソーセージパイ
  4. REACH フロス
PAGE TOP