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

    JavaScript

    シンプルでカスタマイズもしやすいタブパネル実装「jquery-tab」

    jquery-tabはシンプルなタブパネルを実装することができるjQu…

  2. Rollerblade.js

    JavaScript

    画像を360度回転させて見せることができるjQueryプラグイン「Rollerblade.js」

    Rollerblade.jsというjQueryプラグインを使えば、画像…

  3. jQuery Resizable Columns

    JavaScript

    テーブルの列の幅をドラッグでサイズ変更できる「jQuery Resizable Columns」

    じっくりテーブル内の情報を見たい時なんかに便利そうですね。テーブルの列…

  4. t-scroll

    JavaScript

    アニメーションとともにアイテムが一つずつ現れる「t-scroll」

    t-scrollはアニメーションとともにアイテムを一つずつ表示させるこ…

  5. Typewriter JS

    JavaScript

    タイプライターっぽいエフェクトでテキストを表現できる「Typewriter JS」

    Typewriter JSは、タイプライターを使って文字入力するような…

  6. How satisfied are you? Slider

最近の記事

  1. スタバのドリップのホットのショート
  2. LE エルイー 6 PANEL CAP
  3. タリーズ ハウスブレンド
  4. BAG-TW1BKシリーズ

アーカイブ

PAGE TOP