再生・一時停止ボタンで操作できる画像スライドショー「desoSlide」

当ページのリンクには広告が含まれています。

jQuery Plugin » 画像 » 再生・一時停止ボタンで操作できる画像スライドショー「desoSlide」

再生・一時停止ボタンで操作できる画像スライドショーを実装するプラグイン「desoSlide」を紹介します。

jQueryプラグイン「desoSlide」

このプラグインを使えば、再生・一時停止ボタン「←」「→」キーで操作できる画像スライドショーを実装することができます。

またオプションでは、さまざまなアニメ効果・自動切替・インターバル時間などを設定することができるので、おすすめ！

それではデモページの画像スライドショーをご覧ください。

「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>

jQueryプラグイン「desoSlide」

デモのソース（HTML + jQuery）

関連記事（一部広告含む）