jQuery cardslider

JavaScript

カードをスライドさせるようにコンテンツを表示できる「jQuery cardslider」

jQuery cardsliderは、コンテンツをカードのように表示してスライドさせて見せることができるjQueryプラグインです。シンプル・軽量なのでサクサク動作するのが魅力です。コンテンツをただ表示させるだけではもの足りたいという人にはピッタリですね。

jQuery cardslider

デモ

デモでは、カードに書かれたようなコンテンツが複数設置されています。下部にナビゲーションがあるので、ここから各コンテンツにスライドさせることができます。

また、ナビゲーションをクリックしてスライドさせるだけではなく、キーボードの上下矢印キーからでも操作できるようになっています。カードを一枚一枚スライドさせるように、コンテンツを眺めていくことができるので、とてもおもしろいですね。

オプションもいろいろ用意されていて、keys、direction、nav、swipe、dots、beforeCardChange、afterCardChange、nextCard、prevCardなどといった項目を設定することが可能です。細かいカスタマイズをしたい人にとってもうれしい仕様といえそうですね。

というわけで、コンテンツをカードのようにスライドさせながら見せたいという人は、ぜひチェックされてみてはいかがでしょうか?

jQuery cardslider

3D Portfolio Template立体的に回転するテンプレート「3D Portfolio Template」前のページ

iPhone 7(iOS 10)でフラッシュライト(懐中電灯)の明るさを調整するやり方次のページフラッシュライト(懐中電灯)の明るさ調整

関連記事

  1. Simple Modal

    JavaScript

    レスポンシブ対応の軽量・シンプルなモーダル「Simple Modal」

    Simple Modalはレスポンシブに対応した軽量でシンプルなモーダ…

  2. CardTabs

    JavaScript

    ミニマルで超軽量・シンプルなタブを実装できるjQueryプラグイン「CardTabs」

    CardTabsは超軽量でシンプルなタブを実装できるjQueryプラグ…

  3. css3-mediaqueries-js

    JavaScript

    Media QueriesをIE8以下でも使えるようにするための「css3-mediaqueries…

    前回、Media Queriesの@mediaを使用したCSSをまとめ…

  4. ContentTools

    JavaScript

    画面内でそのまま編集できるWYSIWYGエディタ「ContentTools」

    ContentToolsは画面内でそのままコンテンツを編集できるWYS…

  5. no-image

    JavaScript

    3Dキューブによる画像ギャラリー「3D Cube Image Gallery」

    3D Cube Image Galleryは、3Dキューブによるオシャ…

  6. no-image

    JavaScript

    シンプルなモバイルメニューを実装できる「offcanvas-mobile-menu」

    offcanvas-mobile-menuは、シンプルでモバイルフレン…

最近の記事

  1. TR153
  2. cheero Flat 10000mAh with Power Delivery 18W CHE-112
  3. SV-S251
  4. スラウェシ トラジャ

アーカイブ

PAGE TOP