Custom Carousel

JavaScript

カードスタイルのカルーセル・スライダー実装「Custom Carousel」

Custom Carouselはカードスタイルによるシンプルなカルーセル・スライダーを実装できます。左右のアイテムをクリックすることで、前後にスライドしていくことが可能です。操作性も簡単で、たくさんのアイテムをサクサク見ていけるのがいいですね。

Custom Carousel

Custom Carousel

デモでは左・中央・右の3枚のカードスタイルによるアイテムが表示されています。左か右のアイテムは中央のアイテムよりも薄くなっていて、ここをクリックすることで前後にスライド移動していくことができます。

また、キーボードの左右矢印キーにも対応しているので、ここから前後に移動させることも可能です。

左右のアイテムは中央に比べてサイズも一回り小さくなっているので、奥から手前に向かって移動してくるような立体感を感じさせてくれるのがいいですね。

シンプルな操作性で、次々にテンポよくカードを見ていけるところも便利です。パソコンだけでなくスマホやタブレットでも操作しやすいと思います。

滑らかなアニメーションで快適なカルーセル・スライダーを実装したい人は、ぜひ「Custom Carousel」をチェックしてみてはいかがでしょうか?

関連記事

  1. JavaScript

    スクロールバーにあと何分で読めるかを表示してくれるjQueryプラグイン「jQuery Readin…

    とてもシンプルですが何気に便利そうだったので使ってみました。長文記事を…

  2. 2013年上半期jQueryプラグインまとめ

    JavaScript

    当ブログで紹介したjQueryプラグイン12選のまとめ 2012/08 – 2012/0…

    2012年8月〜2012月9月までの当ブログで紹介したjQueryプラ…

  3. Nivo Lightbox

    JavaScript

    Lightbox系のレスポンシブ対応のjQueryプラグイン「Nivo Lightbox」

    シンプルでレスポンシブにも対応しているLightbox系のjQuery…

  4. Adi.js

    JavaScript

    アドブロックを検知してくれる「Adi.js」

    Adi.jsはアドブロックを検知してくれるjQueryプラグインです。…

  5. no-image

    JavaScript

    円形に飛び出すメニューを実装できる「ggExpandableOptions」

    ggExpandableOptionsは円形に飛び出すメニューを実装で…

  6. Monthly.js

    JavaScript

    レスポンシブに対応したカレンダーを実装できる「Monthly.js」

    Monthly.jsはレスポンシブに対応したシンプルで美しいカレンダー…

最近の記事

  1. Waterlogue
  2. macOS Mojaveのダークモード
  3. Olli
  4. 単語帳メーカー(Flashcard Maker App)

Facebookページ

PAGE TOP