今日の人気記事

  1. 追尾型(オーバーレイ)広告を表示「Meerkat」
  2. 画像に拡大・縮小ボタンを「Zoomer」
  3. select要素の複数選択フォームを実装「Multiple Select」
  4. マウスカーソルの位置をアニメーションでハイライト移動「Simple Magicline」
  5. 動画のポップアップLightbox「Video Lightning」

画像スライドショー「jCarousel」オプションたくさんアルヨ

スポンサーリンク

画像スライドショーjQueryプラグイン「jCarousel」を紹介します。

jQueryプラグイン「jCarousel」

このプラグインを使えば、画像スライドショーを簡単に作成することができます。

かなりのオプションがあり、スタイリッシュなのでおすすめです!

スポンサーリンク

デモをご覧ください。左右の矢印をクリックすると画像がスライドします。

「jCarousel」のデモ

デモのソース(HTML + jQuery)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jCarousel - jQueryまとめのプラグイン</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/jcarousel.simple.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.js"></script>
<script type="text/javascript" src="js/jcarousel.simple.js"></script>
</head>
<body>
  <div class="wrapper">
    <h1>jCarouselのデモでーす。</h1>
    <p>左右の矢印をクリックすると画像がスライドします!</p>
    <div class="carousel-wrapper">
      <div data-jcarousel="true" data-wrap="circular" class="carousel">
        <ul>
          <li><img src="img/img1.gif" width="600" height="400" alt=""></li>
          <li><img src="img/img2.gif" width="600" height="400" alt=""></li>
          <li><img src="img/img3.gif" width="600" height="400" alt=""></li>
          <li><img src="img/img4.gif" width="600" height="400" alt=""></li>
          <li><img src="img/img5.gif" width="600" height="400" alt=""></li>
        </ul>
      </div>
      <a data-jcarousel-control="true" data-target="-=1" href="#" class="carousel-control-prev">&lsaquo;</a>
      <a data-jcarousel-control="true" data-target="+=1" href="#" class="carousel-control-next">&rsaquo;</a>
    </div>
  </div>
</body>
</html>
スポンサーリンク

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