为什么这个Bootstrap Carousel刷卡功能不适用于我？

Question

我发现这个codepen：https://codepen.io/andrearufo/pen/rVWpyE

，我很乐意使用它，但由于某种原因，它不会不改变一件事对我的工作，即使我把它复制。为什么是这样？

我没有忘记嵌入bootstrap或jquery。

我也试过其他解决方案的刷卡功能，但由于某种原因，他们都没有工作。唯一一个滑动工作的地方（我在谷歌Chrome开发者工具中尝试过）就在这个codepen上。

$(".carousel").swipe({ 
 

 
    swipe: function(event, direction, distance, duration, fingerCount, fingerData) { 
 

 
    if (direction == 'left') $(this).carousel('next'); 
 
    if (direction == 'right') $(this).carousel('prev'); 
 

 
    }, 
 
    allowPageScroll:"vertical" 
 

 
});

<div class="container"> 
 
    
 
    <div class="page-header"> 
 
    <h1>Bootstrap default carousel with swipe and touch gestures</h1> 
 
    <p class="lead">How to add the swipes gesture to comand the Bootstrap carousel on mobile devices.</p> 
 
    <p>Made by <strong>Andrea Rufo</strong>, more info and tutorial on <a href="http://www.orangedropdesign.com/"> OrangeDropDesign.com</a></p> 
 
    </div> 
 
     
 

 
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
     <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
 
     <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
 
     <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
 
     <li data-target="#carousel-example-generic" data-slide-to="3"></li> 
 
     <li data-target="#carousel-example-generic" data-slide-to="4"></li> 
 
    </ol> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 
     <div class="item active"> 
 
     <img src="https://unsplash.it/1400/600?image=114"> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="https://unsplash.it/1400/600?image=745"> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="https://unsplash.it/1400/600?image=315"> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="https://unsplash.it/1400/600?image=622"> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="https://unsplash.it/1400/600?image=401"> 
 
     </div> 
 
    </div> 
 

 
    <!-- Controls --> 
 
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
     <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
     <span class="sr-only">Next</span> 
 
    </a> 
 
    </div> 
 

 
</div>

Answer 1

这里是你可能会错过JQuery或Swipe LIB的例子。

$(".carousel").swipe({ 
 

 
    swipe: function(event, direction, distance, duration, fingerCount, fingerData) { 
 

 
    if (direction == 'left') $(this).carousel('next'); 
 
    if (direction == 'right') $(this).carousel('prev'); 
 

 
    }, 
 
    allowPageScroll:"vertical" 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script> 
 
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
     <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
 
     <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
 
     <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
 
     <li data-target="#carousel-example-generic" data-slide-to="3"></li> 
 
     <li data-target="#carousel-example-generic" data-slide-to="4"></li> 
 
    </ol> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 
     <div class="item active"> 
 
     <img src="https://unsplash.it/1400/600?image=114"> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="https://unsplash.it/1400/600?image=315"> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="https://unsplash.it/1400/600?image=622"> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="https://unsplash.it/1400/600?image=401"> 
 
     </div> 
 
    </div> 
 

 
    <!-- Controls --> 
 
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
     <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
     <span class="sr-only">Next</span> 
 
    </a> 
 
    </div> 
 

 
</div>