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. humane.js

    JavaScript

    シンプルでモダンなさりげない通知システムを実装できる「humane.js」

    humane.jsはフレームワークなどに依存しないシンプルでモダンな通…

  2. EndlessRiver

    JavaScript

    エンドレスに流れていくコンテンツスライダー「EndlessRiver」

    EndlessRiverはエンドレスに流れていくコンテンツスライダーを…

  3. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでJavaScriptのfor…inを使ってオブジェクトから値を1つずつ取り…

    JavaScriptにはfor...inというプロパティの数だけ繰り返…

  4. Slickhover.js

    JavaScript

    滑らかでスムーズなホバーエフェクトを実装できるjQueryプラグイン「Slickhover.js」

    とても軽量で使いやすいのがいいですね。ホバー時に滑らかでスムーズなエフ…

  5. Foxholder
  6. JavaScript

    アイコンをクリックすると周りにメニューが表示されるjQueryプラグイン「FerroMenu」

    FerroMenuというjQueryプラグインを使えばアイコンをクリッ…

最近の記事

  1. FE 35mm F1.8
  2. RONIN-SC
  3. プラスシェル シティ04 フォールディングカメラケース

アーカイブ

PAGE TOP