it-swarm.com.de

So stellen Sie den Bootstrap-Karussell-Schieberegler ein: Verwenden Sie den linken/rechten Wischvorgang

DEMO 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>

Was ich tun möchte, ist das Hinzufügen der Wischfunktion für links/rechts nur für mobile Geräte. Wie kann ich das machen?

Wie kann ich außerdem die vorherigen/nächsten Schaltflächen, die im Hover-Modus erscheinen, für mobile/ipad-Versionen kleiner machen?

Vielen Dank

53
user3187469

UPDATE:

Ich habe mir diese Lösung ausgedacht, als ich im Webdesign noch ziemlich neu war. Jetzt, da ich älter und weiser bin, scheint die Antwort Mark Shiraldi die bessere Wahl zu sein. Sehen Sie die nächste Top-Antwort. es ist eine produktivere Lösung.

Ich habe kürzlich an einem Projekt gearbeitet und dieses Beispiel hat perfekt funktioniert. Ich gebe dir den Link unten.

Zuerst müssen Sie jQuery Mobile hinzufügen:

http://jquerymobile.com/

Dadurch wird die Touch-Funktion hinzugefügt, und Sie müssen nur noch Ereignisse wie Wischen ausführen:

<script>
$(document).ready(function() {
   $("#myCarousel").swiperight(function() {
      $(this).carousel('prev');
    });
   $("#myCarousel").swipeleft(function() {
      $(this).carousel('next');
   });
});
</script>

Der Link ist unten, wo Sie das von mir verwendete Tutorial finden können:

http://lazcreative.com/blog/how-to/how-to-adding-swipe-support-to-bootstraps-carousel/

86

Ich musste diese Funktionalität zu einem Projekt hinzufügen, an dem ich kürzlich arbeitete, und das Hinzufügen von jQuery Mobile, um dieses Problem zu lösen, erschien mir übertrieben. Daher habe ich eine Lösung gefunden und diese auf github gesetzt: bcSwipe (Bootstrap Carousel Swipe) .

Es ist ein leichtes jQuery-Plugin (~ 600 Bytes gegenüber jQuery Mobile Touch-Ereignissen bei 8kb minimiert) und wurde unter Android und iOS getestet. 

So verwenden Sie es:

$('.carousel').bcSwipe({ threshold: 50 });
85
Mark Shiraldi

Ich bin ein bisschen spät auf der Party, aber hier ist ein bisschen jQuery, das ich verwendet habe:

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

Keine Notwendigkeit für jQuery Mobile oder andere Plugins. Wenn Sie die Empfindlichkeit des Wischens anpassen müssen, passen Sie 5 und -5 an. Hoffe das hilft jemandem.

75
Liam

Siehe diese Lösung: Bootstrap TouchCarousel. Eine Drop-in-Perfektion für Twitter Bootstraps Carousel (v3), um Gesten auf Touch-Geräten zu ermöglichen . http://ixisio.github.io/bootstrap-touch-carousel/

4
user652218

Wenn Sie jQuery mobile nicht wie ich verwenden möchten. Sie können Hammer.js verwenden. 

Meistens ist es jQuery Mobile ohne unnötigen Code.

$(document).ready(function() {
  Hammer(myCarousel).on("swipeleft", function(){
    $(this).carousel('next');
  });
  Hammer(myCarousel).on("swiperight", function(){
    $(this).carousel('prev');
  });
});
3
Madan Bhandari

Die überprüfte Lösung ist nicht genau, manchmal löst das Klicken mit der rechten Maustaste mit der rechten Maustaste nach rechts aus. Nachdem ich verschiedene Plugins für das Durchziehen getestet hatte, fand ich ein fast perfektes.

touchSwipe

ich sagte "fast", weil dieses Plugin keine zukünftigen Elemente unterstützt. Daher müssten wir den Swipe-Aufruf erneut initialisieren, wenn der Swipe-Inhalt durch ajax oder etwas geändert wird. Dieses Plugin bietet viele Optionen, um mit Touch-Events wie Multi-Finger-Touch, Pinch usw. zu spielen.

h ttp: //labs.rampinteractive.co.uk/touchSwipe/demos/index.html

lösung 1:

$("#myCarousel").swipe( {
            swipe:function(event, direction, distance, duration, fingerCount, fingerData) {

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

            }
        });

lösung 2: (für zukünftigen Elementfall)

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");
2
Rameez Rami

Für jeden, der dies herausfindet, scheint das Streichen mit dem Karussell vor etwa 5 Tagen (20. Oktober 2018) laut Datum zu sein
https://github.com/twbs/bootstrap/pull/25776

https://deploy-preview-25776--twbs-bootstrap4.netlify.com/docs/4.1/components/carousel/

0
geo

Dieselbe Funktionalität bevorzuge ich als viel schweres jQuery Mobile ist Carousel Swipe. Ich schlage vor, direkt in den Quellcode von github zu springen und die Datei carousel-swipe.js in Ihr Projektverzeichnis zu kopieren.

Verwenden Sie Swiper-Ereignisse wie folgt: 

$('#carousel-example-generic').carousel({
      interval: false 
  });
0
Shweta