@thorikiriのてょりっき

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

Twitter BootstrapのcarouselとjQuery++でスワイプするカルーセルを作ってみた

javascript

先ほどはjQuery.carouFredSelでやりましたが、Twitter Bootstrapにもカルーセルがあるのでやってみました。
ここで、問題があったのですが、スワイプするときにクリックイベントが発生してしまうのですね。
なので、クリックイベントを一時的に使えないようにすることで解決しました。

<!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/bootstrap.min.js"></script>
    <script type="text/javascript">
      (function() {
        $(function() {
          var enableClick = true;
          $('.carousel').carousel({
            interval: 0
          });
          $('.carousel-inner').on({
            'swipeleft': function(ev) {
              enableClick = false;
              $('.carousel').carousel('next');
              setTimeout(function() {
                enableClick = true;
              }, 100);
            },
            'swiperight': function(ev) {
              enableClick = false;
              $('.carousel').carousel('prev');
              setTimeout(function() {
                  enableClick = true;
                }, 100);
            },
            'click': function(ev) {
              if (enableClick) {
                alert('clicked!!' + ev.data);
              }
            }
          });
        });
      })();
    </script>
    <style type="text/css">
    body {
      padding-top: 50px;
    }
    div.item {
      background-color: #cccccc;
      height: 150px;
      padding: 10px;
    }
    </style>
  </head>
  <body>
    <div class="row">
      <div id="myCarousel" class="carousel slide span12">
        <div class="carousel-inner well">
          <div class="active item span11">
            <span>ほげほげ1</span>
          </div>
          <div class="item span11">
            <span>ほげほげ2</span>
          </div>
          <div class="item span11">
            <span>ほげほげ3</span>
          </div>
          <div class="item span11">
            <span>ほげほげ4</span>
          </div>
          <div class="item span11">
            <span>ほげほげ5</span>
          </div>
          <div class="item span11">
            <span>ほげほげ6</span>
          </div>
          <div class="item span11">
            <span>ほげほげ7</span>
          </div>
          <div class="item span11">
            <span>ほげほげ8</span>
          </div>
          <div class="item span11">
            <span>ほげほげ9</span>
          </div>
          <div class="item span11">
            <span>ほげほげ10</span>
          </div>
        </div>
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
      </div>
    </div>
  </body>
</html>

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