LC Micro Slider

JavaScript

スタイリッシュなスライドアニメーションがかっこいいjQueryスライダー「LC Micro Slider」

LC Micro Sliderは、スタイリッシュなスライドアニメーションがかっこいいスライダーを実装することができるjQueryプラグインです。容量も13KB(JS + CSS)と軽量なほか、レスポンシブにも対応しているのが特徴です。

TouchSwipe-Jquery-Pluginを読み込めばタッチもサポート可能

デモ

デモでは、右から左へフェードしながらスライドするかっこいいスライダーが設置されています。スライダー下部にはナビゲーションが表示されているほか、画像にマウスオーバーすると左上に前後スライド移動できる矢印ボタンなどが表示されます。

さりげなく切り替わるスライドアニメーションがとてもクールな印象を与えてくれますね。

また、このスライダーはレスポンシブにも対応しているので、パソコンからの閲覧だけではなくスマホやタブレットからでも最適なサイズに調整されるのもうれしいポイントの一つです。

さらに、実装面でもシンプルなマークアップやセッティングにより、簡単に使えるようになっているところもグッドです。

一方、パラメーターにはいろいろな項目が用意されているので、カスタマイズして使いたい人にも最適です。主なパラメーターには、slide_fx、nav_arrows、nav_dots、slideshow_cmd、carousel、touchswipe、autoplay、animation_time、slideshow_time、pause_on_hover、loader_codeがあります。

ドット式のナビゲーションの有無や自動再生のオン・オフ、またはアニメーションの時間やスライドショーの時間など、自分好みに細かいセッティングを調整したい人にはピッタリです。

それから、touchswipeという項目からわかるとおり、LC Micro Sliderはタッチもサポートします。試しにiPhoneでデモを確認したところ、ちゃんと画像を切り替えることができました。

ただし、こちらのtouchswipeを有効にするには、TouchSwipe-Jquery-Pluginを読み込む必要があります。

スタイリッシュなスライドアニメーションでレスポンシブにも対応、さらにタッチもサポート可能となれば、かなり魅力的なスライダーといえるのではないでしょうか?

クールなスライドでモバイルフレンドリーなjQueryスライダーを自サイトに設置したいという人は、ぜひ「LC Micro Slider」を選択肢の一つに加えてみてください。

LC Micro Slider

関連記事

  1. Foxholder
  2. Bar Indicator

    JavaScript

    数値をインジケーターで見やすく表示できる「Bar Indicator」

    Bar Indicatorは数値をインジケーターで表示させることができ…

  3. JavaScript

    ホバーすると中心から円形メニューが表示される「jQuery Wheel Menu」

    ホバーするとその地点を中心にして円形メニューが表示されるプラグイン「j…

  4. JavaScript

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

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

  5. NO IMAGE
  6. no-image

    JavaScript

    サイドバーをフローティングできる「FloatSidebar.js」

    FloatSidebar.jsはサイドバーをフローティングできるVan…

最近の記事

  1. 三菱ブレッドオーブン
  2. 浜離宮恩賜庭園

アーカイブ

PAGE TOP