再生・一時停止ボタンで操作できる画像スライドショー「desoSlide」
当ページのリンクには広告が含まれています。
スポンサーリンク
再生・一時停止ボタンで操作できる画像スライドショーを実装するプラグイン「desoSlide」を紹介します。
jQueryプラグイン「desoSlide」
このプラグインを使えば、再生・一時停止ボタン「←」「→」キーで操作できる画像スライドショーを実装することができます。
またオプションでは、さまざまなアニメ効果・自動切替・インターバル時間などを設定することができるので、おすすめ！
スポンサーリンク
それではデモページの画像スライドショーをご覧ください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="desoSlide のデモでーす。">
<title>desoSlide - jQueryプラグイン</title>
<link href="css/jquery.desoslide.min.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/magic.min.css" rel="stylesheet">
<style>
.thumbs {
float: left;
}
.thumbs li {
list-style: none;
}
</style>
</head>
<body>
<h1>desoSlide のデモでーす。</h1>
<p>再生ボタン・一時停止ボタンで画像の切替がスタート・ストップします。</p>
<p>左右の矢印キーで画像が切り替わります。</p>
<ul class="thumbs">
<li>
<a href="img/01-red.png">
<img src="img/01-red_thumb.png"
alt="赤"
data-desoslide-caption-title="赤だよ。" />
</a>
</li>
<li>
<a href="img/02-orange.png">
<img src="img/02-orange_thumb.png"
alt="赤"
data-desoslide-caption-title="橙だよ。" />
</a>
</li>
<li>
<a href="img/03-yellow.png">
<img src="img/03-yellow_thumb.png"
alt="赤"
data-desoslide-caption-title="黄だよ。" />
</a>
<li>
<a href="img/04-green.png">
<img src="img/04-green_thumb.png"
alt="赤"
data-desoslide-caption-title="緑だよ。" />
</a>
</li>
<li>
<a href="img/05-blue.png">
<img src="img/05-blue_thumb.png"
alt="赤"
data-desoslide-caption-title="青だよ。" />
</a>
</li>
<li>
<a href="img/06-indigo.png">
<img src="img/06-indigo_thumb.png"
alt="赤"
data-desoslide-caption-title="藍だよ。" />
</a>
</li>
<li>
<a href="img/07-purple.png">
<img src="img/07-purple_thumb.png"
alt="赤"
data-desoslide-caption-title="紫だよ。" />
</a>
</li>
</ul>
<div id="slideshow"></div>
<script src="js/jquery.js"></script>
<script src="js/jquery.desoslide.min.js"></script>
<script>
$('#slideshow').desoSlide({
thumbs: $('ul.thumbs li > a'),
auto: {
start: true
},
effect: {
provider: 'magic',
name: 'foolish'
},
controls: {
keys: true
}
});
</script>
</body>
</html>
スポンサーリンク