横幅いっぱいの画像スライダー「full width image slider」

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

jQuery Plugin » 画像 » 横幅いっぱいの画像スライダー「full width image slider」

横幅いっぱいの画像スライドショーjQueryプラグイン「full width image slider」を紹介します。

jQueryプラグイン「full width image slider」

「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>

full width image slider

jQueryプラグイン「full width image slider」

デモのソース（HTML + jQuery）

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