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. no-image

    JavaScript

    スライドアニメーションによる多階層なハンバーガーメニュー「ggContentMenu」

    ggContentMenuはスライドアニメーションを備えた多階層に最適…

  2. How To Create A Simple Image Slideshow

    JavaScript

    チルトエフェクトがオシャレなスライドショー「How To Create A Simple Image…

    オシャレなチルトエフェクトにダイナミックなイメージスライダーを実装でき…

  3. Radial Progress Bars

    JavaScript

    アニメーション付きのサークルプログレスバー「Radial Progress Bars」

    Radial Progress Barsは、アニメーション付きのサーク…

  4. Responsive Elements
  5. jQuery Sequency js

    JavaScript

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

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

最近の記事

  1. クリニカのY字タイプのフロス
  2. 日和山公園の桜
  3. 成城石井 フレンチロースト
  4. COMOLI カシミアシルクニットパーカ
  5. 橋

アーカイブ

PAGE TOP