画像スライダー - キャプションのアニメ効果がかっこいい「CSS3 jQuery Slider」
当ページのリンクには広告が含まれています。
スポンサーリンク
キャプションのアニメ効果がかっこいい画像スライダーを実装するプラグイン「CSS3 jQuery Slider」を紹介します。
jQueryプラグイン「CSS3 jQuery Slider」
このプラグインを使えば、吹き出しのような画像のキャプションのアニメ効果がかっこいい画像スライダーを簡単に作成することができます。
また、画像が自動的に切り替わったり、画像がぐいぐい動いたり……と至れり尽くせりの画像スライダーです。
スポンサーリンク
それではデモページをご覧ください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="LockScrollのデモでーす。">
<title>Scroll Table - jQueryプラグイン</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section id="rt-showcase-surround">
<div id="rt-showcase" class="slider-container rt-overlay-dark">
<div class="rt-container slider-container">
<div class="rt-grid-12 rt-alpha rt-omega">
<div class="csslider1 autoplay">
<input name="cs_anchor1" autocomplete="off" id="cs_slide1_0" type="radio" class="cs_anchor slide" >
<input name="cs_anchor1" autocomplete="off" id="cs_slide1_1" type="radio" class="cs_anchor slide" >
<input name="cs_anchor1" autocomplete="off" id="cs_slide1_2" type="radio" class="cs_anchor slide" >
<input name="cs_anchor1" autocomplete="off" id="cs_slide1_3" type="radio" class="cs_anchor slide" >
<input name="cs_anchor1" autocomplete="off" id="cs_play1" type="radio" class="cs_anchor" checked>
<input name="cs_anchor1" autocomplete="off" id="cs_pause1" type="radio" class="cs_anchor" >
<ul>
<div style="width: 100%; visibility: hidden; font-size: 0px; line-height: 0;">
<img src="images/canal.jpg" style="width: 100%;">
</div>
<li class="num0 img"><img src="images/01-red.png" /></li>
<li class="num1 img"><img src="images/02-orange.png" /></li>
<li class="num2 img"><img src="images/03-yellow.png" /></li>
<li class="num3 img"><img src="images/04-green.png" /></li>
</ul>
<div class="cs_description">
<label class="num0">
<span class="cs_title"><span class="cs_wrapper">赤！</span></span>
<br/><span class="cs_descr"><span class="cs_wrapper">赤色だよぉー</span></span>
</label>
<label class="num1">
<span class="cs_title"><span class="cs_wrapper">橙！</span></span>
<br/><span class="cs_descr"><span class="cs_wrapper">橙色だよぉー</span></span>
</label>
<label class="num2">
<span class="cs_title"><span class="cs_wrapper">黄！</span></span>
<br/><span class="cs_descr"><span class="cs_wrapper">黄色だよぉー</span></span>
</label>
<label class="num3">
<span class="cs_title"><span class="cs_wrapper">緑！</span></span>
<br/><span class="cs_descr"><span class="cs_wrapper">緑色だよぉー</span></span>
</label>
</div>
<div class="cs_arrowprev">
<label class="num0" for="cs_slide1_0"></label>
<label class="num1" for="cs_slide1_1"></label>
<label class="num2" for="cs_slide1_2"></label>
<label class="num3" for="cs_slide1_3"></label>
</div>
<div class="cs_arrownext">
<label class="num0" for="cs_slide1_0"></label>
<label class="num1" for="cs_slide1_1"></label>
<label class="num2" for="cs_slide1_2"></label>
<label class="num3" for="cs_slide1_3"></label>
</div>
<div class="cs_bullets">
<label class="num0" for="cs_slide1_0">
<span class="cs_point"></span>
<span class="cs_thumb"><img src="tooltips/01-red.png" /></span>
</label>
<label class="num1" for="cs_slide1_1">
<span class="cs_point"></span>
<span class="cs_thumb"><img src="tooltips/02-orange.png" /></span>
</label>
<label class="num2" for="cs_slide1_2">
<span class="cs_point"></span>
<span class="cs_thumb"><img src="tooltips/03-yellow.png" /></span>
</label>
<label class="num3" for="cs_slide1_3">
<span class="cs_point"></span>
<span class="cs_thumb"><img src="tooltips/04-green.png" /></span>
</label>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</section>
</body>
</html>
スポンサーリンク