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

Albe TimelineJSONデータを用いたタイムライン実装「Albe Timeline」前のページ

スライダーの位置でアイコンが変化する「How satisfied are you? Slider」次のページHow satisfied are you? Slider

関連記事

  1. Houdini

    JavaScript

    シンプルな折りたたみ・展開やアコーディオンを実装できる「Houdini」

    Houdiniはシンプルな折りたたみ・展開ができる機能やアコーディオン…

  2. Parallax Slider with jQuery
  3. jCorner

    JavaScript

    フラットデザインに合う紙をめくったエフェクトを実装できるjQueryプラグイン「jCorner」

    jCornerというjQueryプラグインを使ってみました。フラットデ…

  4. Section Scroller

    JavaScript

    セクションごとに自動でスクロールしてくれるボタン実装「Section Scroller」

    Section Scrollerは、セクションごとにスムーズにスクロー…

  5. Smooth Scroll behavior polyfill
  6. no-image

    JavaScript

    タッチ対応のドロワーコンポーネント「hy-drawer」

    hy-drawerはタッチに対応したドロワーコンポーネントです。And…

最近の記事

  1. RF85mm F2 MACRO IS STM
  2. Anker PowerWave Pad Alloy
  3. Anker Bolder LC30
  4. BG-R10

アーカイブ

PAGE TOP