まだデータがありません。
横幅いっぱいの画像スライダー「full width image slider」
当ページのリンクには広告が含まれています。
スポンサーリンク
横幅いっぱいの画像スライドショーjQueryプラグイン「full width image slider」を紹介します。
jQueryプラグイン「full width image slider」
「full width image slider」は、トップページの画像スライダーに最適な画像スライドショーが簡単に実装できるプラグインです。おすすめです！
スポンサーリンク
横幅いっぱいの画像スライダーのデモをご覧ください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="description" content="SKDSliderのデモでーす。">
<title>SKDSlider - jQuery Plugin Demo</title>
<script src="//code.jquery.com/jquery-2.0.0.js"></script>
<script src="src/skdslider.js"></script>
<link href="src/skdslider.css" rel="stylesheet">
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#demo').skdslider({'delay':5000, 'fadeSpeed': 2000});
});
</script>
<style type="text/css">
.demo-code{ background-color:#ffffff; border:1px solid #333333; display:block; padding:10px;}
</style>
</head>
<body>
<h1>SKDSliderのデモでーす。</h1>
<div id="demo" class="skdslider">
<ul>
<li>
<img src="img/1.jpg" />
<div class="slide-desc">
<h2>いーち</h2>
<p>11111111111のDiscription<a class="more" href="#">more</a></p>
</div>
</li>
<li><img src="img/2.jpg" />
<div class="slide-desc">
<h2>にー</h2>
<p>22222222222222222222222222222222222222222222222222<a class="more" href="#">more</a></p>
</div>
</li>
<li><img src="img/3.jpg" />
<div class="slide-desc">
<h2>さん</h2>
<p>33333333333333333333333333333333333333333333333333<a class="more" href="#">more</a></p>
</div>
</li>
<li><img src="img/4.jpg" />
<div class="slide-desc">
<h2>しー</h2>
<p>444444444444444444444444444444444444444444444444<a class="more" href="#">more</a></p>
</div>
</li>
<li><img src="img/5.jpg" />
<div class="slide-desc">
<h2>GoGoGo-Go-Go-GoGo</h2>
<p>555555555555555555555555555555555555555555555555<a class="more" href="#">more</a></p>
</div>
</li>
</ul>
</div>
</body>
</html>
スポンサーリンク