no-image

JavaScript

豊富なオプションでカスタマイズ性も高いjQueryスライダー「startVal」

startValは豊富なオプションやAPIを有したカスタマイズ性の高いスライダーを実装できるjQueryスライダープラグインです。ボリュームある内容ですが、プラグイン自体は軽量に仕上がっていたりマークアップもシンプルに記述できたりと、使いやすそうな印象です。

startVal

デモ

デモでは賑やかな動きをするスライダーが設置されています。スライダー下部には左右に切り替える矢印ボタン、スライダー右上にはナビゲーションが設置されています。

スライダーは一定時間が経過すると自動でスライドするようになっています。スライダー下部にその時間を示すプログレスバーが表示されるので、このバーが左から右へ伸びていき、右端まで伸びると次の画像にスライドされます。

アニメーションは画像がグルッグルッと回転するダイナミックな動きをします。最初は時計回りに回転して、その後に今度は反時計回りに回転します。

オプションやAPIにはたくさんの項目が用意されているので、カスタマイズして使いたい人には嬉しい仕様ですね。ちなみに先ほどのアニメーションもオプションから変更することができます。

アニメーションは「animation」の項目から設定可能です。デフォルトは「rotation」で、この他にもtranslation、vibration、zoomといった値が用意されています。

オプションを利用することで細部まで自分好みにカスタマイズできると思うので、気になる方はぜひチェックしてみてください。

startVal

関連記事

  1. jquery.enhsplitter

    JavaScript

    コンテンツを分離できるフレーム実装「jquery.enhsplitter」

    jquery.enhsplitterはコンテンツを分離させるフレームを…

  2. jQuery Stick ‘em

    JavaScript

    スクロール時にその場所のコンテンツに応じたサイドバーが追従する「jQuery Stick ‘em」

    ちょっと使いどころがありそうなプラグインだったので使い方をメモしときま…

  3. Sticky Multi Header Scroll
  4. basicContext

    JavaScript

    使いやすいコンテキストメニューを実装できる「basicContext」

    basicContextはシンプルで使いやすいコンテキストメニューを実…

  5. Simple button radios

    JavaScript

    シンプルで高性能なラジオボタンを実装できる「Simple button radios」

    Simple button radiosはシンプルで高性能なラジオボタ…

  6. no-image

最近の記事

  1. YAECA ワイドテーパードデニム 10-13WW
  2. ADR-3ML39シリーズ
  3. キュレル モイスチャーバーム
  4. FUJIFILM X-Pro3
  5. iPhone 11 ProとApple Watch Hermès

アーカイブ

PAGE TOP