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. Building a Vertical Timeline With CSS and a Touch of JavaScript
  2. chalk-animation

    JavaScript

    カラフルなアニメーションを実装できる「chalk-animation」

    chalk-animationはカラフルなアニメーションによるテキスト…

  3. Linear Slider

    JavaScript

    シンプルな機能で使いやすいjQueryによる水平スライダー「Linear Slider」

    Linear Sliderはシンプルな機能性による水平スライダーを実装…

  4. Unite Gallery

    JavaScript

    レスポンシブな画像・動画ギャラリーを実装できる「Unite Gallery」

    Unite Galleryは、レスポンシブに対応した画像・動画ギャラリ…

  5. no-image

    JavaScript

    オシャレなスクロールエフェクトを実装できる「jQuery Smoove」

    jQuery Smooveは、オシャレなスクロールエフェクトを実装する…

  6. Animated Image Pieces

    JavaScript

    画像が細かいピースになるアニメーション実装「Animated Image Pieces」

    Animated Image Piecesは、画像が細かいピースに分解…

最近の記事

  1. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ
  2. ペットボトルホルスター

アーカイブ

PAGE TOP