no-image

JavaScript

軽量・高速でレスポンシブ対応のjQueryスライダー「partialViewSlider」

partialViewSliderは左右にスライドする軽量・高速でレスポンシブに対応したjQueryスライダーです。キーボードによる操作も可能なほか、豊富なオプションでカスタマイズ性にも優れています。

partialViewSlider

デモ

デモでは左右に矢印ボタンが設置されたイメージスライダーが表示されます。スライダー両端にある矢印ボタンから画像を前後移動できるほか、キーボードの左右矢印キーからでも操作を行うことが可能です。

また、レスポンシブにも対応しているので画面幅を縮小・拡大することで、そのサイズに合わせてスライダーのサイズも変化します。パソコンをはじめスマホやタブレットのモバイルからでも快適に閲覧できるのがいいですね。

自動再生やキーボードなどの有効・無効のセッティングはオプションから手軽に設定可能です。主なオプション項目は、width、controls、controlsPosition、backdrop、dots、auto、transitionSpeed、delay、pauseOnHover、keyboard、perspective、prevHtml、nextHtmlです。

そのほか、イベントやメソッドの設定も行えます。

というわけで、軽量でレスポンシブにも対応したスライダーを実装できる「partialViewSlider」の紹介でした。

関連記事

  1. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQuery(JavaScript)で指定した要素の子要素数や最大文字数を配列内から取得する

    jQueryで指定した要素の子要素の数やその文字数、文字なんかを配列に…

  2. Cube-jQuery-Slider

    JavaScript

    3Dキューブなスライダーを実装できる「Cube-jQuery-Slider」

    Cube-jQuery-Sliderは、3Dキューブなスライダーを実装…

  3. Parallax Slider with jQuery
  4. NO IMAGE
  5. Segment

    JavaScript

    SVG pathをアニメーションさせる軽量のスクリプト「Segment」

    SegmentはSVG pathをアニメーションさせる軽量のスクリプト…

  6. JavaScript

    カスタマイズも自由にできるjQuery「bxSlider」の使い方

    個人的にかなりよさげなjQueryスライダーを使ってみました。その名も…

最近の記事

  1. フェルメール展
  2. 上島珈琲店 No.11
  3. 銀座トリコロール

アーカイブ

PAGE TOP