Modo consigliato per abilitare gli eventi tattili in Bootstrap 3?

Question

Ora che Bootstrap 3 è spento, qual è l'opzione consigliata per abilitare il tocco? As before, non ci sono molti eventi di tocco nel bootstrap.js, anche se dovrebbe essere un primo framework mobile.

L'ultima cosa I've found su github suggerisce l'uso di fastclick.js, ma prima della versione 3.0.

Answer 1

Il mio consiglio è di utilizzare Bootstrap accanto a JQuery mobile, TouchSwipe o Hammer.js. Un esempio di un carosello touchstrap può essere trovato here.

Answer 2

Iniziare a lavorare su un altro completamente funzionante Touch Carousel su GitHub. Ciò include anche gli eventi di trascinamento ...

Answer 3

nonostante credo che bootstrap sia uno scherzo di un framework css, , soprattutto a causa della mancata navigazione multilivello.

Probabilmente sarei d'accordo con gli altri per andare con un carosello diverso se avete una scelta. Dalla mia esperienza JQuery mobile funzionerà piuttosto liscia ma il mio sito non è stato costruito lungo il lato jquery mobile e il css che ne fa parte è davvero una cosa incasinata.

<script> 
    $(document).ready(function() { 
     $('.carouselresp').carousel({'data-interval': 6000, 'data-pause': "hover"}); 
     var clicking = false; 
     var currentMousePos = 0; 
     var newMousePos = 0; 

     $('.carouselresp img').on('mousedown', function(event) { 
      clicking = true; 
      currentMousePos = event.pageX; 
     }); 

     $('.carouselresp img').on('touchstart', function(event) { 
      clicking = true; 
      var touchstart = event.originalEvent.touches[0]; 
      currentMousePos = touchstart.pageX; 
     }); 

     $(document).on('mouseup', function(event) { 
      clicking = false; 
     }); 

     $('.carouselresp img').on('touchend', function(event) { 
      clicking = false; 
     }); 

     $(document).on('mousemove', function(event) { 
      if (!clicking) { 
       return; 
      }else { 
       if (event.pageX < currentMousePos) { 
        if ((currentMousePos - event.pageX) > 50) { 
         $('.carouselresp').carousel('next'); 
         clicking = false; 
        } 
       } else { 
        if ((event.pageX - currentMousePos) > 50) { 
         $('.carouselresp').carousel('prev'); 
         clicking = false; 
        } 
       } 
      } 
     }); 

     $('.carouselresp img').on('touchmove', function(event) { 
      var touch = event.originalEvent.touches[0]; 
      if (!clicking) { 
       return; 
      }else { 
       if (touch.pageX < currentMousePos) { 
        if ((currentMousePos - touch.pageX) > 50) { 
         $('.carouselresp').carousel('next'); 
         clicking = false; 
        } 
       } else { 
        if ((touch.pageX - currentMousePos) > 50) { 
         $('.carouselresp').carousel('prev'); 
         clicking = false; 
        } 
       } 
      } 
      event.preventDefault(); 
     }); 
    }); 


</script> 

funziona bene per me su Android e iPhone troppo, più sto permettendo il passaggio anche nei browser senza alcun tocco supporto

versione base può essere trovato qui

goo.gl/2SIOJj

speranza ha aiutato

TomHre