no-image

JavaScript

シンプルなイメージスライダーとカルーセルを実装できる「SkySlider」

SkySliderはシンプルで軽量、そしてレスポンシブにも対応したイメージスライダーとカルーセルを実装できるjQueryプラグインです。ループや自動再生の有無などもオプションから手軽にセッティング可能です。

SkySlider

デモ

デモではスライダーとカルーセルの2タイプが用意されています。どちらも左右の矢印ボタンから前後の画像にスライドさせることができます。また、下部にはナビゲーションも設置されていて、ここから現在の位置を把握することも可能です。

デモではスライダーは自分でスライドさせる必要がありますが、カルーセルは自動再生になっています。自動再生のオン・オフはオプションから自由に設定できます。

SkySliderに用意されているオプションには、interval、carousel、duration、items、loop、autoplay、callbackといった項目があります。各オプションのデフォルト値は、intervalが3000、carouselがfalse、durationが500、itemsが1、loopがfalse、autoplayがfalseです。

オプションを活用したカスタマイズやコールバック関数のセッティングもできるのが便利ですね。

というわけで、シンプル軽量でレスポンシブ対応のイメージスライダーとカルーセルを実装できるjQueryプラグイン「SkySlide」の紹介でした。

SkySlider

関連記事

  1. jQuery Bar Rating

    JavaScript

    選択範囲を評価ウィジェットに変換できる「jQuery Bar Rating」

    jQuery Bar Ratingは、ユーザーが選択する範囲を評価ウィ…

  2. CurvedText

    JavaScript

    曲線上にテキストを配置できるjQueryプラグイン「CurvedText」

    CurvedTextというjQueryプラグインを使えば、任意の曲線上…

  3. Zoomer

    JavaScript

    画像をズームできてギャラリーにもすることができるjQueryプラグイン「Zoomer」

    ZoomerというjQueryプラグインを使えば画像をズームさせる機能…

  4. roll.js

    JavaScript

    スクロールによるページネーション、進捗度、ポジションなどの値を取得できる「roll.js」

    roll.jsはスクロールによるページネーション、進捗度、ポジションな…

  5. lory

    JavaScript

    タッチ対応でカルーセルにもできるミニマルなJS(jQuery)スライダー「lory」

    loryはタッチに対応したミニマルなデザインが特徴的なスライダーを実装…

  6. ReadRemaining.js

    JavaScript

    記事を読むのにかかる時間を教えてくれるjQueryプラグイン「ReadRemaining.js」

    ReadRemaining.jsは記事を読むのにどのくらい時間がかかる…

最近の記事

  1. 梅しば
  2. BM-IBCDH13RD
  3. 雪
  4. ホットのドリップ
  5. めんたいこ&チーズ味 海老せんべい

アーカイブ

PAGE TOP