Comment faire de Bootstrap carrousel curseur utilisez mobile gauche/droite de balayage

DÉMO JSSFIDDLE

  <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 à gauche/droite de la touche de balayage des fonctionnalités pour les appareils mobiles. Comment puis-je le faire?

Aussi, comment puis-je faire prev/next boutons qui apparaissent sur le vol stationnaire, les plus petits pour mobile/ipad versions?

Grâce

Remarque: Il n'y a pas de "hover" sur la plupart des appareils mobiles.

InformationsquelleAutor user3187469 | 2014-01-25

87

Mise à JOUR:

Je suis venu avec cette solution quand j'étais assez nouveau à la conception web. Maintenant que je suis plus vieux et plus sage, la réponse Marque Shiraldi a donné semble être une meilleure option. Voir le prochain haut de réponse; il est plus productif de la solution.

J'ai travaillé sur un projet récemment et cet exemple a parfaitement fonctionné. Je vous donne le lien ci-dessous.

Vous devez d'abord ajouter jQuery mobile:

http://jquerymobile.com/

Cela s'ajoute la fonctionnalité tactile, et ensuite vous avez juste à faire des événements tels que le balayage:
```
<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, j'ai utilisé:

http://lazcreative.com/blog/how-to/how-to-adding-swipe-support-to-bootstraps-carousel/
- Woohoo Réponse Sommet de bébé!!
- Certainement suivre les conseils et de construire un événement tactile-personnalisée uniquement jQuery Mobile version jquerymobile.com/download-builder. Sinon, vous serez susceptibles de casser votre site si ce n'est déjà construit pour/avec jQuery Mobile.
- Je suis à droit de vote de cette baisse en raison de la lourdeur de l'installation de jQuery mobile pour résoudre une seule question simple. Pour des raisons de simplicité, je suggère la réponse de Mark Shiraldi, il est gracieux et moins de code.
- eh bien, il semble que vous avez raison. L'installation de complètement nouveau système de grille pour ces petites fonctionnalité n'est pas une bonne solution.
- Je n'aime pas cette solution, car le chariot ne pas "coller" à votre doigt lorsque vous vous déplacez sur elle. Il n'est pas convivial.
- Je suis d'accord avec tous les commentaires précédents..
InformationsquelleAutor Abdul-Rafay Shaikh
93

J'ai besoin d'ajouter cette fonctionnalité à un projet que je travaillais récemment, et l'ajout de jQuery Mobile pour résoudre ce problème semblait exagéré, alors je suis venu avec une solution et la mettre sur github: bcSwipe (Bootstrap Carrousel de Balayage).

C'est un plugin jQuery léger (~600 octets minifiés vs jQuery Mobile tactile événements à 8 ko), et il a été testé sur Android et iOS.

C'est la façon dont vous l'utiliser:
```
$('.carousel').bcSwipe({ threshold: 50 });
```
- OMG!!! MERCI!!!!!! VOUS AVEZ SAUVÉ MA VIE!!! l' .carrousel approche a problème lorsque vous faites glisser, mais avec ton code, ça fonctionne!
- Shiraldi j'ai essayé d'utiliser le Bootstrap Carrousel de glissement et de script et pourtant, il ne fonctionne pas correctement
- Pas de travail pour moi, tel que présenté.
- Bon Maaark. J'ai juste essayé ce à l'aide de Bootstrap v4.0.0-alpha.5 et jQuery 3.1.1. Le balayage est fonctionne bien sur mon smartphone Android et le rendu automatiquement sur les grands écrans comme prévu.
- Mise à jour: j'ai réalisé que c'était une erreur dans ma mise en page. bcSwipe fonctionne très bien, c'est la meilleure solution que j'ai trouvé
- donc, ce woeks seulement avec bootstrapv4?
- Rick selon la page github c'est pour Bootstrap 3. J'ai seulement utilisé avec Bootstrap 4. Il semble que d'autres ont utilisé avec succès sur la version 3. Ping Marque Shiraldi pour plus d'info introuvable sur le github bcSwipe page. Bonne chance!
- Fonctionne très bien pour moi sur Bootstrap 3 ainsi. Je vous remercie.
- Travaillé avec Bootstrap 4, ce doit être accepté de répondre. Merci!!!!
- Fonctionne parfaitement !! bien fait il y a sir 😉
- Grande, mais accidentelle de balayage vertical ruines il.
InformationsquelleAutor Mark Shiraldi
91

Je suis un peu en retard à la fête, mais voici un peu de jQuery, j'ai été en utilisant:
```
$(".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 tout autres plugins. Si vous avez besoin d'ajuster la sensibilité du balayage ajuster la 5 et -5. Espérons que cela aide quelqu'un.
- Excellente solution, même si vous avez la "prev" et "next" inversé. Beaucoup plus léger que l'ajout d'un plein mobile jQuery solution. Merci.
- Wow, cool solution! Mais j'ai plusieurs carrousels sur une page. Donc, je préfère utiliser $(this) au lieu de $(".carousel') l'intérieur de la fonction. Et j'ai aussi échangé prev et next 🙂
- J'ai modifié la réponse
- Merci fonctionne très bien
- Excellent! Travail comme un charme.
- Super, Merci @Liam. C'est exactement ce que je recherche.
- Devons-nous faire de tout changement au présent de l'utiliser avec bootstrap 4 carrousel ?
- Oui, cela devrait fonctionner pour Bootstrap 4. Les méthodes sont les mêmes.
- Enfin!!! J'ai essayé d'utiliser les diverses autres méthodes pour faire glisser travail dans Demandware. Leur nouvelle version, SFRA, a bootstrap inspiré des racines, mais les autres correctifs qui sont censés travailler pour bootstrap ne fonctionnent pas dans Demandware. C'était la réponse! Merci!
InformationsquelleAutor Liam
4

Voir cette solution:
Bootstrap TouchCarousel. Une baisse de la perfection pour Twitter Bootstrap Carrousel (v3) pour activer les mouvements sur les appareils tactiles.
http://ixisio.github.io/bootstrap-touch-carousel/
- J'aime beaucoup cette approche, mais je ne pense pas que le colis est prêt pour une mise en production encore. Le carrousel a quelques gros bugs comme des liens/modals pas de travail après carouslel initialisation etc.
InformationsquelleAutor stan1379

Si vous ne souhaitez pas utiliser jQuery mobile comme moi. Vous pouvez utiliser Hammer.js

C'est surtout 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');
  });
});

InformationsquelleAutor Madan Bhandari

Vérifié solution n'est pas exacte, parfois de la souris-cliquez-droit sur les déclencheurs à droite-glisser.
après avoir essayé différents plugins pour glisser, j'ai trouvé un presque parfait.

touchSwipe

j'ai dit "presque" parce que ce plugin ne prend pas en charge les éléments futurs. donc, on devrait avoir à réinitialiser le balayage d'appel lorsque le balayage de contenu est modifié par ajax ou quelque chose. ce plugin avez beaucoup d'options pour jouer avec les événements tactiles comme les multi-tactile,une pincée etc.

http://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 les futurs élément de cas)

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");

InformationsquelleAutor Rameez Rami

2

Pour quiconque de trouver cela, faites glisser le doigt sur le carrousel semble être natifs de l'ordre de 5 jours (20 Oct 2018) selon

https://github.com/twbs/bootstrap/pull/25776

https://deploy-preview-25776--twbs-bootstrap4.netlify.com/docs/4.1/components/carousel/
- Pouvez-vous fournir des informations sur la façon de l'activer? Je suis à l'aide 4.1.3 et le balayage n'est pas de travail par défaut
- C'est probablement une très ombragé façon de le faire, mais j'ai juste attrapé le .js à partir de cette page de prévisualisation qui fonctionne avec swipe c'est à dire deploy-preview-25776--twbs-bootstrap4.netlify.com/docs/4.1/dist/... Donc pas tout à fait un autochtone, mais doit être proche.
- Wow, la diff entre la Production 4.1.3 et lié à votre version est si différent - 462 différences. Un peu effrayant lorsque l'on envisage de l'utiliser.
- J'ai essayé de trouver un moyen de mettre en œuvre un "Balayage" de l'événement pour le carrousel, mais oui, la fonctionnalité est là (natif), mais ne fonctionne que si vous êtes sur un appareil mobile. getbootstrap.com/docs/4.3/components/carousel/#with-controls
InformationsquelleAutor geo
0

Mêmes fonctionnalités que je préfère que l'utilisation de beaucoup lourd jQuery mobile est Carrousel De Balayage. je suggère de passer directement dans le code source sur github, et de copier le fichier carousel-swipe.js dans votre répertoire de projet.

Utilisation de chipeur événements comme ci-dessous:
```
$('#carousel-example-generic').carousel({
      interval: false 
  });
```
InformationsquelleAutor Shweta

Vous devez vous connecter pour publier un commentaire.