@thorikiriのてょりっき

@thorikiriがWebとかAndroidとかの技術ネタや本を読んだブログです

jQuery.carouFredSelとjQuery++で左右にスワイプ出来るカルーセルを作ってみた

javascript

スワイプイベントだけとか、カルーセルだけとかってのはあるんだけど、両方搭載してるのが見当たらなかったので、作ってみただけですけどね。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>カルーセルサンプル</title>
    <link rel="stylesheet" href="styles/bootstrap.min.css" />
    <link rel="stylesheet" href="styles/bootstrap-responsive.min.css" />
    <script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="scripts/jquerypp.js"></script>
    <script type="text/javascript" src="scripts/jquery.carouFredSel-5.6.1-packed.js"></script>
    <script type="text/javascript">
      (function() {
        $(function() {
          $('#carousel').carouFredSel({
            width: 1000,
            height: 'auto',
            prev: '#prev',
            next: '#next',
            auto: false
          }).on({
            'swipeleft': function(ev) {
              $('#carousel').trigger('next');
            },
            'swiperight': function(ev) {
              $('#carousel').trigger('prev');
            },
            'dblclick': function(ev) {
            	alert('Hello!! doubleclick');
            },
            'click': function(ev) {
            	alert('Hello!! click');
            }
          });
        });
      })();
    </script>
    <style type="text/css">
    body {
      padding-top: 50px;
    }
    ul {
      list-style: none;
      display: block;
    }
    ul li {
      list-style-type: none;
      display: block;
      float: left;
      height: 150px;
    }
    ul li div {
      height: 100px;
      background-color: #cccccc;
      border-radius: 5px;
    }
    .list_carousel {
      height: 150px;
    }
    .clearfix {
      float: none;
      clear: both;
    }
    .prev {
      float: left;
      margin-left: 10px;
    }
    .next {
      float: right;
      margin-right: 10px;
    }
    </style>
  </head>
  <body>
    <div class="row">
      <div class="span12 list_carousel">
        <ul id="carousel" class="well span11">
          <li class="span3">
            <div>
              <span>ほげほげ1</span>
            </div>
          </li>
          <li class="span3">
            <div>
              <span>ほげほげ2</span>
            </div>
          </li>
          <li class="span3">
            <div>
              <span>ほげほげ3</span>
            </div>
          </li>
          <li class="span3">
            <div>
              <span>ほげほげ4</span>
            </div>
          </li>
          <li class="span3">
            <div>
              <span>ほげほげ5</span>
            </div>
          </li>
          <li class="span3">
            <div>
              <span>ほげほげ6</span>
            </div>
          </li>
          <li class="span3">
            <div>
              <span>ほげほげ7</span>
            </div>
          </li>
          <li class="span3">
            <div>
              <span>ほげほげ8</span>
            </div>
          </li>
          <li class="span3">
            <div>
              <span>ほげほげ9</span>
            </div>
          </li>
          <li class="span3">
            <div>
              <span>ほげほげ10</span>
            </div>
          </li>
        </ul>
        <div class="clearfix"></div>
      </div>
    </div>
    <div class="row">
      <div class="span12">
        <a id="prev" class="prev" href="#">&lt;</a>
        <a id="next" class="next" href="#">&gt;</a>
      </div>
    </div>
  </body>
</html>

依存ライブラリはこちらにあるものです。