加入刷卡來引導旋轉木馬

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 Mobile的庫： 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

我們想出了這個簡單的解決方案，支持觸摸滑動和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