今日の人気記事

まだデータがありません。

レスポンシブな画像スライダー「Responsive Carousel」

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

スポンサーリンク

レスポンシブな画像スライダーjQueryプラグイン「Responsive Carousel」を紹介します。

jQueryプラグイン「Responsive Carousel」

画像スライダーで、しかもレスポンシブなんて！ もうなんでもありやな！　という便利プラグインです。

スポンサーリンク

まずは、デモをご覧ください。「前へ」「次へ」というリンクをクリックすると、画像がスライドします。ブラウザを縮めるとレスポンシブなスタイルを実現してくれます。タイトルには画像といれましたが埋め込み動画にも利用できますよ。これは便利ですね。

「Responsive Carousel」のデモ

デモのソース（HTML + jQuery）

ソースを表示
印刷SyntaxHighlighterについて
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Responsive Carousel - jQueryプラグインまとめのカルマ</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.hammer.min.js"></script>
<script type="text/javascript" src="js/responsiveCarousel.min.js"></script>
<script type="text/javascript">
$(document).ready(function($){
  $('.gallery-02').carousel({ visible: 3, itemMargin: 10, itemMinWidth: 300 });
});
  </script>
</head>
<body>
<div id="main">
  <div class="container">
    <div class="wrap-container">
      <h1>Responsive Carouselのデモでーす。</h1>
      <p>「前へ」「次へ」をクリックすると、画像がスライドします。</p>
      <p>ブラウザの横幅を縮めてみてください。レスポンシブな画像が楽しめます。</p>
      <div id="nav-02" class="crsl-nav">
        <a href="#" class="previous">&laquo; 前へ</a>
        <a href="#" class="next">次へ &raquo;</a>
        </div>
        <div class="gallery gallery-02 crsl-items" data-navigation="nav-02">
          <div class="crsl-wrap">
            <figure class="crsl-item">
              <img src="./img/img1.gif" alt="Feature 1" width="630" height="410" class="wide-image" />
              <figcaption>ここに画像のキャプションを入れるのだぁ</figcaption>
            </figure>
            <figure class="crsl-item">
              <img src="./img/img2.gif" alt="Feature 2" width="630" height="410" class="wide-image" />
              <figcaption>小さくなっても頭脳は同じ！</figcaption>
            </figure>
            <figure class="crsl-item">
              <img src="./img/img3.gif" alt="Feature 3" width="630" height="410" class="wide-image" />
              <figcaption>迷宮無しの名探偵！</figcaption>
            </figure>
            <figure class="crsl-item">
              <img src="./img/img4.gif" alt="Feature 4" width="630" height="410" class="wide-image" />
              <figcaption>真実はいつもひとつ！</figcaption>
            </figure>
            <figure class="crsl-item">
              <img src="./img/img5.gif" alt="Feature 5" width="630" height="410" class="wide-image" />
              <figcaption>じっちゃんの名にかけて！</figcaption>
            </figure>
          </div>
        </div>
    </div>
  </div>
</div>
</body>
</html>

その他にもたくさんのオプションがあります。詳細はこちらからどうぞ。

スポンサーリンク

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