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

jQuery_Overlay_Menuフルスクリーンナビゲーションを表示できるハンバーガーメニュー実装「jQuery_Overlay_Menu」前のページ

タイプライターっぽいエフェクトでテキストを表現できる「Typewriter JS」次のページTypewriter JS

関連記事

  1. jquery-backToTop

    JavaScript

    カスタマイズ性に優れたトップへ戻るボタンを実装できる「jquery-backToTop」

    jquery-backToTopはカスタマイズ性に優れた「トップへ戻る…

  2. no-image

    JavaScript

    プレーンなJavaScriptによるレスポンシブなLightbox「jsOnlyLightbox」

    jsOnlyLightboxは、jQueryなどを必要としないプレーン…

  3. Responsive Nav

    JavaScript

    レスポンシブ対応の軽量なナビゲーションを実装できる「Responsive Nav」

    レスポンシブ対応のナビゲーションを実装できる「Responsive N…

  4. no-image

    JavaScript

    シンプル・軽量なjQueryイメージビューア「WimmViewer」

    WimmViewerはシンプルで軽量なイメージビューアを実装できるjQ…

  5. Flurry

    JavaScript

    Webページに雪を美しく降らせる冬にピッタリのjQueryプラグイン「Flurry」

    FlurryはWebページに雪を美しく降らせてくれるアニメーションを実…

最近の記事

  1. パーソナルパーティション
  2. 200-DGBG020
  3. Anker PowerPort 5-in-1 37.5W Hub

アーカイブ

PAGE TOP