はカルーセル

Question

をブートストラップするためにスワイプを追加し、私はこのコードを持っている：

<div class="container"> 
    <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000"> 
     <!--Indicators--> 
     <ol class="carousel-indicators"> 
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
      <li data-target="#myCarousel" data-slide-to="1"></li> 
      <li data-target="#myCarousel" data-slide-to="2"></li> 
      <li data-target="#myCarousel" data-slide-to="3"></li> 
     </ol> 
     <!--Images--> 
     <div class="carousel-inner"> 
      <div class="item active"> 
       <img src="../sources/img/carousel/01.jpg"> 
        <div class="carousel-caption"> 
         <div class="carouselcaptiontext"> 
        <h2>Demo</h2> 
       <h4>Text</h4> 
       </div> 
        </div> 
      </div> 
      <div class="item"> 
       <img src="../sources/img/carousel/02.jpg"> 
       <div class="carousel-caption"> 
        <div class="carouselcaptiontext"> 
         <h2>Demo</h2> 
         <h4>Text</h4> 
        </div> 
       </div> 
      </div> 
      <div class="item"> 
       <img src="../sources/img/carousel/03.jpg"> 
       <div class="carousel-caption"> 
        <div class="carouselcaptiontext"> 
         <h2>Demo</h2> 
         <h4>Text</h4> 
        </div> 
       </div> 
      </div> 
      <div class="item"> 
       <img src="../sources/img/carousel/04.jpg"> 
       <div class="carousel-caption"> 
        <div class="carouselcaptiontext"> 
         <h2>Demo</h2> 
         <h4>Text</h4> 
        </div> 
       </div> 
      </div> 
     </div> 
     <!--Carousel controls--> 
     <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
      <span class="glyphicon glyphicon-chevron-left"></span> 
      <span class="sr-only">Previous</span> 
     </a> 
     <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
      <span class="glyphicon glyphicon-chevron-right"></span> 
      <span class="sr-only">Next</span> 
     </a> 
    </div> 
</div> <!--Container carousel--> 

私は倍数のソリューションを試みたが、それは動作しません。私はなぜそれが必要なのかわかりません。コードでは私が追加：

<script type="text/javascript" src="../sources/js/jquery.min.js"></script> 
<script type="text/javascript" src="../sources/js/bootstrap.min.js"></script> 

バージョンは次のとおりです。 ブートストラップv3.3.7

は、あなたが私を助けることができる

のjQueryのJavaScriptライブラリV3.2.1？

おかげ

Answer 1

これは私のソリューションです：私たちは、そのjQueryのモバイル用のタッチイベントライブラリをサポートする必要が

： http://jquerymobile.com/download-builder/

インポートライブラリfile.min.js最後に

新しいjavascriptファイルに追加：

$(document).ready(function() { 
    $(".carousel").swipe({ 
     swipe: function(event, direction, distance, duration, fingerCount, fingerData) { 
      if (direction == 'left') $(this).carousel('next'); 
      if (direction == 'right') $(this).carousel('prev'); 
     }, 
     allowPageScroll:"vertical" 
    }); 
}); 

Answer 2

この簡単なソリューションは、touch swipeとmouseMoveをサポートしています。 あなたの設定でうまくいくはずです。理解しやすいです。それの

(function ($) { 
// Mobile swipe if more than 5 pixels moved 
$(".carousel").on("touchstart", function (event) { 
    var xClick = event.originalEvent.touches[0].pageX; 
    $(this).one("touchmove", function (event) { 
     var xMove = event.originalEvent.touches[0].pageX; 
     if (Math.floor(xClick - xMove) > 5) { 
      $(this).carousel('next'); 
     } 
     else if (Math.floor(xClick - xMove) < -5) { 
      $(this).carousel('prev'); 
     } 
    }); 
    $(".carousel").on("touchend", function() { 
     $(this).off("touchmove"); 
    }); 
}); 

// Mouse swipe when mouse is dragged to left/right 
var xClick; 
var mouseDown; 

$(".carousel").on("mousedown", function (event) { 
    xClick = event.pageX; 
    mouseDown = true; 
}); 

$(".carousel").on("mousemove", function (event) { 
    if (mouseDown) { 
     var xMove = event.pageX; 
     if (xClick > xMove) { 
      $(this).carousel('next'); 
     } 
     else if (xClick < xMove) { 
      $(this).carousel('prev'); 
     } 
    } 
}); 

$(".carousel").on("mouseup", function (event) { 
    mouseDown = false; 
}); 
})(jQuery); 

一部はリアムのこの回答から取られる： Liams answer on carousel swipe