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」の紹介でした。

関連記事

  1. Tipso

    JavaScript

    レスポンシブでアニメーションもいい感じのツールチップのjQueryプラグイン「Tipso」

    Tipsoはレスポンシブに対応した軽量でアニメーションもいい感じのツー…

  2. Hover Carousel

    JavaScript

    超軽量なホバーカルーセルを実装できる「Hover Carousel」

    Hover Carouselは超軽量なホバーで動作するカルーセルを実装…

  3. JavaScript

    ウェーブ(波形)を簡単に描いてくれるjQueryプラグイン「Wave」

    WaveというjQueryプラグインを使ってみました。これを使えばウェ…

  4. Filterizr

    JavaScript

    ソートやシャッフルができるギャラリーを実装するjQueryプラグイン「Filterizr」

    Filterizrはソートやシャッフルができるレスポンシブに対応したギ…

  5. Responsive Elements
  6. TabbedContent

最近の記事

  1. OWL-WDDESK01
  2. ワンタッチ着脱フィルターキット
  3. Soundcore Ace A1
  4. cheero USB-C PD Charger 60W

アーカイブ

PAGE TOP