jQuery Responsive FullWide Sliderを試してみる

JavaScript

jQuery Responsive FullWide Sliderを試してみる。

jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験 | BlackFlag
http://black-flag.net/jquery/20130709-4710.html

下記のような感じでHTMLを書く。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
/* （上記のサイトのCSSをここに貼り付ける）*/

/* あと、ulのmarginとpaddingを0にしないと変な余白が入ってしまう */
ul {
  margin: 0;
  padding: 0;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
/* （上記のサイトのSCRIPTをここに貼り付ける） */
</script>
</head>
<body>
  <div class="wideslider">
    <ul>
      <li><a href="#1"><img src="img/001.png" /></a></li>
      <li><a href="#2"><img src="img/002.png" /></a></li>
      <li><a href="#3"><img src="img/003.png" /></a></li>
      <li><a href="#4"><img src="img/004.png" /></a></li>
      <li><a href="#5"><img src="img/005.png" /></a></li>
    </ul>
  </div><!--/.wideslider-->
</body>
</html>

デモ