Bootstrap Vertical Carousel

Web Information

垂直カルーセルを実装できる「Bootstrap Vertical Carousel」

Bootstrap Vertical Carouselは、Bootstrapを活用した垂直カルーセルを実装することができます。滑らかなアニメーションで切り替わっていく垂直カルーセルは、サイト内にちょっとしたアクセントをプラスしたい人にはピッタリですね。

Bootstrap Vertical Carousel

Bootstrap Vertical Carousel

デモではカルーセルが自動で垂直にスライドしながら切り替わっていきます。全部で5つの内容がローテーションされます。

カルーセルの右端には上下の矢印アイコンが設置されていて、ここから上下好きな方向へスライドさせることが可能です。全体的なデザインもとてもシンプルなので、いろんなサイトに合わせやすそうですね。

ブログなら関連記事や人気記事をカルーセルでさりげなく見せる、なんていう使い方もアリかと思います。スペースの有効活用にもなるし、アニメーションすることで注目させることもできるはず。

というわけで、滑らかな上下スライドアニメーションによる垂直カルーセルを実装したい人は、ぜひ「Bootstrap Vertical Carousel」をチェックしてみてはいかがでしょうか。

jQuery ui material design datepickerマテリアルデザインによるデートピッカー「jQuery ui material design datepicker」前のページ

iPhone 7で4K動画(4K/30 fps)を撮影するための設定方法次のページiPhone 7で4K動画撮影の設定方法

関連記事

  1. Web Information

    Google +1(プラスワン)ボタンを今更ながら設置してみた

    当ブログには現在Twitter、Facebook、はてなブックマークの…

  2. Chromeで翻訳する方法

    Web Information

    Chromeで外国語のWebサイトのページを翻訳する方法

    Chromeで普段使用する言語以外の外国語のWebサイトにアクセスする…

  3. 都道府県の一覧やアルファベット、都道府県コードなど

    Web Information

    都道府県の一覧やアルファベット表記、都道府県コードなど

    都道府県の一覧やアルファベット表記、都道府県コードなどを確認できるサイ…

  4. Web Information

    今年(2011)最後に自分のWebサイトのファビコンを作成して設置してみる

    ファビコンをまだ設置していなかったので設置してみました。当サイトはまだ…

  5. Web Information

    FacebookのLike Boxを設置して表示させるまでのやり方

    FacebookのLike Boxの設置から表示させるまでのやり方をメ…

  6. Web Information

    自分のGoogleアナリティクスコードが勝手に他人のサイトで使われていた時の対処方法

    昨日ふとGoogleアナリティクスを見ていたら、自分の知らないページが…

最近の記事

  1. 梅
  2. CAR-HLD12BK
  3. OWL-LPB6701LA

アーカイブ

PAGE TOP