まだデータがありません。
レスポンシブな画像スライダー「Responsive Carousel」
当ページのリンクには広告が含まれています。
スポンサーリンク
レスポンシブな画像スライダーjQueryプラグイン「Responsive Carousel」を紹介します。
jQueryプラグイン「Responsive Carousel」
画像スライダーで、しかもレスポンシブなんて！ もうなんでもありやな！ という便利プラグインです。
スポンサーリンク
まずは、デモをご覧ください。「前へ」「次へ」というリンクをクリックすると、画像がスライドします。ブラウザを縮めるとレスポンシブなスタイルを実現してくれます。タイトルには画像といれましたが埋め込み動画にも利用できますよ。これは便利ですね。
デモのソース（HTML + jQuery）
<!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">« 前へ</a>
<a href="#" class="next">次へ »</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>
スポンサーリンク