今日の人気記事

  1. マウスオーバーで画像を拡大(ズーム)「EasyZoom」
  2. ExcelのようにTableが編集できちゃう「Handsontable」
  3. 画像の拡大・縮小と移動(パン)「pan and zoom 」
  4. select要素の複数選択フォームを実装「Multiple Select」
  5. 指定した数値から折れ線グラフを描画「SimpleChart」

さまざまな横幅の画像が使える画像スライダー「QueueSlider」

スポンサーリンク

さまざまな横幅の画像が使える画像スライダーを実装するプラグイン「QueueSlider」を紹介します。

jQueryプラグイン「QueueSliderm」

このプラグインを使えば、異なる横幅の画像を使った画像スライダーを実装することができます。

jQueryを使った画像スライダーはいろいろありますが、横幅が違ってもOKとはっ!なかなかおもしろいですね。

スポンサーリンク

デモの「Next」ボタンをクリックし、画像スライダーを動かしてみてください。

「QueueSlider」のデモ

ソース(HTML + jQuery)


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="description" content="QueueSliderのデモでーす。">
<title>QueueSlider - jQueryプラグイン</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<link rel="stylesheet" href="style.css">
<style>
div.queueslider { position:relative; overflow:hidden; width:100%; height:350px; }
div.queueslider ul.queue { position:absolute; top:0; left:0; display:block; margin:0; padding:0; }
div.queueslider ul.queue li { float:left; display:block; margin:0; padding:0; list-style:none; text-align:center; }
div.queueslider ul.queue li div, div.queueslider ul.queue li img, div.queueslider ul.queue li video, div.queueslider ul.queue li audio { margin:0 auto; text-align:left; }
div.queueslider button { z-index:100; position:absolute; display:block; margin:0; padding:5px; outline:none; border:none; cursor:pointer; }
div.queueslider button.previous { left:0; }
div.queueslider button.next { right:0; }
</style>
</head>
<body>

<div id="qs1" class="queueslider">
  <ul class="queue">
    <li><img src="images/img1.png" alt="赤" /></li>
    <li><img src="images/img2.png" alt="緑" /></li>
    <li><img src="images/img3.png" alt="青" /></li>
    <li><img src="images/img4.png" alt="紫" /></li>
  </ul>
</div>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="jquery.queueslider.min.js"></script>
<script defer>
(function($) {
  $(window).bind('load', function() {
    $('div#qs1').queueSlider();
  });
}(jQuery));
</script>

</body>
</html>
スポンサーリンク

関連記事(一部広告含む)