レスポンシブ対応のシンプルなスライダー「Excolo Slider」

「Excolo Slider」は実装が簡単でとてもシンプルなスライダーですが、レスポンシブ対応、マウスクリック、スマホでのタッチ共に対応しています。

Excolo Slider

screenshot237

シンプルといえども進む、戻るボタンや、オートプレイなどスライダーの基本的なオプションはしっかり用意されています(詳しくは上記リンク先を参照してください)。レスポンシブ対応もばっちりです。

まずはPCでフルスクリーン。

screenshot239

 

サイズを小さくしてもしっかり機能しています。ばっちりレスポシブです。

screenshot241

 

それでは実装方法をご紹介します。まずはjQuery含む3つの外部ファイルを読み込みます。

<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.excoloSlider.js"></script>
<link href="css/jquery.excoloSlider.css" rel="stylesheet">

 

HTMLはスライダーを設置したい箇所に以下のようにマークアップします。

<div id="sliderA" class="slider">
  <img src="images/image1.jpg" />
  <img src="images/image2.jpg" />
  <img src="images/image3.jpg" />
  <img src="images/image4.jpg" />
</div>

 

JavaScriptはたったのこれだけ。HTMLのdivタグで指定したidをセレクタとしてください。

$(function () {
  $("#sliderA").excoloSlider();
});

 

するとこのようなスライダーを実装することが出来ました。

screenshot238

やっぱり実装が簡単なプラグインはいいですよね。時間がかからないうえに、保守性もばっちりです。スライダーを検討中の方はぜひ参考にどうぞ。

 

Home > JavaScript > レスポンシブ対応のシンプルなスライダー「Excolo Slider」

Return to page top