まだデータがありません。
画像スライドショー「jCarousel」オプションたくさんアルヨ
当ページのリンクには広告が含まれています。
スポンサーリンク
画像スライドショーjQueryプラグイン「jCarousel」を紹介します。
jQueryプラグイン「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">‹</a>
<a data-jcarousel-control="true" data-target="+=1" href="#" class="carousel-control-next">›</a>
</div>
</div>
</body>
</html>
スポンサーリンク