まだデータがありません。
さまざまな横幅の画像が使える画像スライダー「QueueSlider」
当ページのリンクには広告が含まれています。
スポンサーリンク
さまざまな横幅の画像が使える画像スライダーを実装するプラグイン「QueueSlider」を紹介します。
jQueryプラグイン「QueueSliderm」
このプラグインを使えば、異なる横幅の画像を使った画像スライダーを実装することができます。
jQueryを使った画像スライダーはいろいろありますが、横幅が違ってもOKとはっ！なかなかおもしろいですね。
スポンサーリンク
デモの「Next」ボタンをクリックし、画像スライダーを動かしてみてください。
ソース（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>
スポンサーリンク