Comment faire en sorte que le curseur du carrousel de Bootstrap utilise le balayage mobile gauche/droite
<div class="col-md-4">
<!--Carousel-->
<div id="sidebar-carousel-1" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators grey">
<li data-target="#sidebar-carousel-1" data-slide-to="0" class="active"></li>
<li data-target="#sidebar-carousel-1" data-slide-to="1"></li>
<li data-target="#sidebar-carousel-1" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<a href="" data-lightbox="image-1" title="">
<img src="http://shrani.si/f/3D/13b/1rt3lPab/2/img1.jpg" alt="...">
</a>
</div>
<div class="item">
<a href="" data-lightbox="image-1" title="">
<img src="http://shrani.si/f/S/jE/UcTuhZ6/1/img2.jpg" alt="...">
</a> </div>
<div class="item">
<a href="" data-lightbox="image-1" title="">
<img src="http://shrani.si/f/h/To/1yjUEZbP/img3.jpg" alt="...">
</a> </div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#sidebar-carousel-1" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#sidebar-carousel-1" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!--/Carousel--></div>
Ce que je veux faire est d’ajouter une fonctionnalité de balayage tactile gauche/droite pour les appareils mobiles uniquement. Comment puis je faire ça?
Aussi, comment puis-je créer des boutons Précédent/Suivant, qui apparaissent en survol, plus petits pour les versions mobile/ipad?
Merci
METTRE À JOUR:
Je suis venu avec cette solution quand j'étais assez nouveau pour la conception web. Maintenant que je suis plus vieux et plus sage, la réponse que _ Mark Shiraldi semble être une meilleure option. Voir la prochaine réponse en haut; c'est une solution plus productive.
J'ai récemment travaillé sur un projet et cet exemple a parfaitement fonctionné. Je vous donne le lien ci-dessous.
Vous devez d’abord ajouter jQuery mobile:
Cela ajoute la fonctionnalité tactile, et il ne vous reste plus qu'à créer des événements tels que glisser:
<script>
$(document).ready(function() {
$("#myCarousel").swiperight(function() {
$(this).carousel('prev');
});
$("#myCarousel").swipeleft(function() {
$(this).carousel('next');
});
});
</script>
Le lien est ci-dessous, où vous pouvez trouver le tutoriel que j'ai utilisé:
http://lazcreative.com/blog/how-to/how-to-adding-swipe-support-to-bootstraps-carousel/
J'avais besoin d'ajouter cette fonctionnalité à un projet sur lequel je travaillais récemment et ajouter jQuery Mobile simplement pour résoudre ce problème me paraissait excessif. J'ai donc trouvé une solution et l'ai mise sur github: bcSwipe (Bootstrap Carousel Swipe) .
Il s’agit d’un plugin jQuery léger (environ 600 octets minimisé par rapport aux événements tactiles de jQuery Mobile à 8 Ko) et il a été testé sur Android et iOS.
Voici comment vous l'utilisez:
$('.carousel').bcSwipe({ threshold: 50 });
Je suis un peu en retard à la fête, mais voici un peu de jQuery que j'utilise:
$(".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");
});
});
Pas besoin de jQuery mobile ou de tout autre plugin. Si vous devez ajuster la sensibilité du balayage, ajustez 5 et -5. J'espère que ça aide quelqu'un.
Si vous ne voulez pas utiliser jQuery mobile comme moi. Vous pouvez utiliser Hammer.js
C'est principalement comme jQuery Mobile sans code inutile.
$(document).ready(function() {
Hammer(myCarousel).on("swipeleft", function(){
$(this).carousel('next');
});
Hammer(myCarousel).on("swiperight", function(){
$(this).carousel('prev');
});
});
La solution cochée n'est pas précise, parfois, un clic droit de la souris déclenche un balayage droit . Après avoir essayé différents plugins, j'ai trouvé un plugin presque parfait.
j'ai dit "presque" parce que ce plugin ne supporte pas les futurs éléments. il nous faudrait donc réinitialiser l'appel de balayage lorsque le contenu du balayage est modifié par ajax ou quelque chose du genre. ce plugin a beaucoup d'options pour jouer avec des événements tactiles comme le multi-finger-touch, le pincement, etc.
h ttp: //labs.rampinteractive.co.uk/touchSwipe/demos/index.html
solution 1:
$("#myCarousel").swipe( {
swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
if(direction=='left'){
$(this).carousel('next');
}else if(direction=='right'){
$(this).carousel('prev');
}
}
});
solution 2: (pour le cas futur d'élément)
function addSwipeTo(selector){
$(selector).swipe("destroy");
$(selector).swipe( {
swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
if(direction=='left'){
$(this).carousel('next');
}else if(direction=='right'){
$(this).carousel('prev');
}
}
});
}
addSwipeTo("#myCarousel");
Pour tous ceux qui le découvrent, le balayage sur le carrousel semble être natif depuis environ 5 jours (20 octobre 2018),
https://github.com/twbs/bootstrap/pull/25776
https://deploy-preview-25776--twbs-bootstrap4.netlify.com/docs/4.1/components/carousel/
La même fonctionnalité que je préfère que d'utiliser beaucoup de lourds jQuery mobile est Carrousel Swipe. Je suggère de passer directement au code source sur github et de copier le fichier carousel-swipe.js dans votre répertoire de projet.
Utilisez les événements swiper comme ci-dessous:
$('#carousel-example-generic').carousel({
interval: false
});