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でウィンドウサイズによって処理を変える

    JavaScript

    jQueryの基本的なanimateメソッドを使って適当に遊んでみる

    jQueryのanimateメソッドを使えば自分で好きなようにアニメー…

  2. jQuery ui material design datepicker
  3. Unicorn.js

    JavaScript

    ホバーするとテキストがレインボーに光るjQueryプラグイン「Unicorn.js」

    おもしろいプラグインがあったのでご紹介します。テキストにホバーするとレ…

  4. JavaScript

    シンプルで使いやすいベーシックなスライドショーを実装できるjQueryプラグイン「Basic jQu…

    jQueryスライダーのネタが多いですが、今日もまたスライダーのプラグ…

  5. DD Scroll Boxes
  6. PWS Tabs jQuery Plugin

最近の記事

  1. レンズペン3 ミニプロとレンズペン ELITE マイクロプロ
  2. カメラマングローブ Grip Hot Shot III
  3. 包(つつむ)巾着ポーチ
  4. KMC-80BK

Instagram始めました

Facebookページ

PAGE TOP