GELöST Referenz https://github.com/avinoamr/bootstrap-carousel-swipeSwipe Unterstützung mit Bootstrap-Karussell
Hey Jungs, ich bin versucht, eine Website für mein kleines Unternehmen zu entwerfen .. Mein primäres Ziel ist es Swipe Unterstützung meiner Bootstrap benutzerdefinierten Karussell hinzuzufügen. Ich habe mehrere Antworten darauf gefunden, aber ich kann es nicht an meinem Karussell arbeiten lassen. Nach einer Stunde Versuch und Irrtum suche ich einen Rat ...
Was vermisse ich? Vielen Dank im Voraus für Ihre Hilfe!
update Ich versuche immer noch, dies zur Arbeit zu bringen. Ich habe versucht, die JQuery-CDN anstelle der lokalen Datei zu verwenden. Ich habe immer versucht, die Methode hammer.js zu verwenden. Ich dachte, vielleicht würde das Div-Overlay es stoppen, also entfernte ich diese für Testzwecke ohne Erfolg .. Ich habe auch versucht, Datenintervall ohne Erfolg zu entfernen .... Wieder würde jede Hilfe dankbar sein, danke.
/* My Carousel HTML */
<div class="carousel fade-carousel slide" data-ride="carousel" data-interval="10000" id="bs-carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#bs-carousel" data-slide-to="0" class="active"></li>
<li data-target="#bs-carousel" data-slide-to="1"></li>
<li data-target="#bs-carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item slides active">
<!-- Overlay -->
<div class="overlay"></div>
<div class="slide-1" role="img" aria-label="Shingle Roofing Free Estimates Licensed Bonded Insured"></div>
<div class="hero">
<header>
<h1>Shingle Roofing</h1>
<h3>"Get the Estimate You Deserve!"</h3>
</header>
<a href="tel:+12178207597" class="btn btn-hero btn-lg" role="button">Call Now (217) 820-7597</a>
</div>
</div>
<div class="item slides">
<!-- Overlay -->
<div class="overlay"></div>
<div class="slide-2" role="img" aria-label="Metal Roofing Free Estimates Licensed Bonded Insured"></div>
<div class="hero">
<header>
<h1>Metal Roofing</h1>
<h3>"Get the Estimate You Deserve!"</h3>
</header>
<a href="tel:+12178207597" class="btn btn-hero btn-lg" role="button">Call Now (217) 820-7597</a>
</div>
</div>
<div class="item slides">
<!-- Overlay -->
<div class="overlay"></div>
<div class="slide-3" role="img" aria-label="Rubber Roofing Free Estimates Licensed Bonded Insured"></div>
<div class="hero">
<header>
<h1>Rubber Roofing</h1>
<h3>"Get the Estimate You Deserve!"</h3>
</header>
<a href="tel:+12178207597" class="btn btn-hero btn-lg" role="button">Call Now (217) 820-7597</a>
</div>
</div>
</div>
</div>
/* Slide-Support-Skript */
<script src="js/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function() {
$("#bs-carousel").swiperight(function() {
$(this).carousel('next');
});
$("#bs-carousel").swipeleft(function() {
$(this).carousel('prev');
});
});
</script>