Custom Carousel

JavaScript

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

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

Custom Carousel

Custom Carousel

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

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

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

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

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

TyperTextテキストタイピングエフェクトを実装できる「TyperText」前のページ

四方にドラッグ移動できる水平タイムライン実装「jQuery Timespace」次のページjQuery Timespace

関連記事

  1. no-image

    JavaScript

    指定したテキストをハイライトとタイピング効果で表示できる「typeLighter.js」

    typeLighter.jsは、指定したテキストをハイライトとタイピン…

  2. Pongstagr.am

    JavaScript

    自分のインスタグラムの画像を表示できるjQueryプラグイン「Pongstagr.am」

    Pongstagr.amは自分のインスタグラムの画像をWebサイトに表…

  3. Multi-Level Accordion Menu
  4. JavaScript

    文字の半分をスタイルすることができるjQueryプラグイン「Splitchar」

    SplitcharというjQueryプラグインを使えば、文字の半分をス…

  5. hummingbird-popover

    JavaScript

    高速・軽量なコンテキストメニュー実装「hummingbird-popover」

    hummingbird-popoverは高速・軽量なコンテキストメニュ…

  6. Priority Nav Scroller

    JavaScript

    水平スクロールができるナビゲーション「Priority Nav Scroller」

    Priority Nav Scrollerは水平スクロールを備えたナビ…

最近の記事

  1. 甘柿
  2. 冬用のふとん
  3. 田沢湖
PAGE TOP