Warum funktioniert diese Bootstrap Karussell Swipe Funktion nicht für mich?

Question

fand ich diese codepen: https://codepen.io/andrearufo/pen/rVWpyE

und ich würde gerne, es zu benutzen, aber aus irgendeinem Grund ist es für mich nicht, selbst wenn ich es kopieren, ohne eine einzige Sache zu ändern. Warum ist das?

Ich habe nicht vergessen, Bootstrap noch jquery einzubetten.

Ich habe auch andere Lösungen für eine Swipe-Funktion versucht, aber aus irgendeinem Grund hat keiner von ihnen funktioniert. Das einzige Karussell, bei dem der Swipe funktionierte (ich habe es in den Google Chrome-Entwicklertools versucht), war auf diesem 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

Hier ist das Beispiel, das Sie JQuery oder Swipe LIB verpassen könnte.

$(".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>