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. FAST
  2. クリスマスブレンド
  3. ホワイトチョコマカダミアドーナツ
  4. エッグペペ
  5. ダークチョコレート
PAGE TOP