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>

Lo que quiero hacer es agregar a la izquierda/derecha toque pase funcionalidad para dispositivos móviles sólo. ¿Cómo puedo hacer eso?

También, ¿cómo puedo hacer botones prev/next, que aparecen en hover, más pequeño para el móvil/ipad versiones?

Gracias

  • Nota: no Hay ningún «hover» en la mayoría de los dispositivos móviles.
InformationsquelleAutor user3187469 | 2014-01-25

8 Comentarios

  1. 88

    ACTUALIZACIÓN:

    Se me ocurrió esta solución cuando yo era bastante nuevo para el diseño web. Ahora que estoy más viejo y sabio, la respuesta Marca Shiraldi dio parece ser una mejor opción. Consulte la siguiente respuesta; es más productivo solución.

    He trabajado en un proyecto recientemente y este ejemplo funcionó a la perfección. Yo estoy dando el enlace de más abajo.

    Primero tienes que añadir jQuery mobile:

    http://jquerymobile.com/

    Esto se añade la funcionalidad táctil y, a continuación, sólo tienes que hacer eventos como deslizar el dedo:

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

    El enlace de abajo, donde se puede encontrar el tutorial que he utilizado:

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

    • Woohoo Respuesta de bebé!!
    • Definitivamente siga los consejos y construir un toque de eventos-sólo personalizado de jQuery Mobile versión en jquerymobile.com/download-builder. De lo contrario es probable que romper su sitio si no está ya construido para/con jQuery Mobile.
    • Yo soy de votar este abajo, debido a la pesada mano de la instalación de jQuery mobile para resolver únicamente una cuestión sencilla. Para la simplicidad que sugieren que la respuesta de Mark Shiraldi, es gracioso y menos código.
    • bueno, parece que estás en lo correcto. Instalación completamente nuevo sistema de la red de pequeños característica no es una buena solución.
    • No me gusta esta solución, ya que las diapositivas no se «pegue» a dedo como se mueve sobre ella. No es amigable para el usuario.
    • Estoy de acuerdo con todos los comentarios anteriores..

  2. 94

    Necesitaba para agregar esta funcionalidad a un proyecto en el que estaba trabajando recientemente y la adición de jQuery Mobile sólo para resolver este problema parecía una exageración, así que se me ocurrió una solución y ponerla en github: bcSwipe (Bootstrap Carrusel Pase).

    Es un ligero plugin de jQuery (~600 bytes record vs jQuery Mobile eventos de toque en 8kb), y que ha sido probado en Android y iOS.

    Esta es la forma de usarlo:

    $('.carousel').bcSwipe({ threshold: 50 });
    • OMG!!! GRACIAS!!! USTED SALVÓ MI VIDA!!! el .carrusel de enfoque tiene problema cuando se desliza, pero con el código, funciona!
    • Shiraldi he tratado de usar el Bootstrap Carrusel de barrido y de secuencia de comandos y, sin embargo, no funciona correctamente
    • No funciona para mí como se presenta.
    • Bueno Maaark. He intentado este con Bootstrap v4.0.0-alfa.5 y jQuery 3.1.1. Deslizar es trabajo fino en mi smartphone Android y procesamiento automáticamente en las pantallas grandes como se esperaba.
    • Actualización: me di cuenta de esto fue un error en mi diseño. bcSwipe funciona genial, es la mejor solución que he encontrado
    • así que este woeks sólo con bootstrapv4?
    • Rick según la página de github es para Bootstrap 3. Sólo he utilizado con Boostrap 4. Parece que otros han utilizado con éxito en la versión 3. Ping Marca Shiraldi para más info no se encuentra en el github bcSwipe página. Buena suerte!
    • Funciona muy bien para mí en Bootstrap 3 también. Gracias.
    • Trabajó con Bootstrap 4, este debe ser aceptado respuesta. Gracias!
    • Funciona a la perfección !! bien hecho no sir 😉
    • Gran, pero accidental vertical que pase la arruina.

  3. 91

    Estoy un poco tarde a la fiesta, pero aquí es un poco de jQuery he estado usando:

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

    Sin necesidad de jQuery mobile o cualquier otro de los plugins. Si necesita ajustar la sensibilidad del frotis ajustar el 5 y -5. Espero que esto ayude a alguien.

    • Gran solución, aunque usted tiene el ‘anterior’ y ‘siguiente’ invertida. Mucho más ligera que la adición de un completo jQuery mobile solución. Gracias.
    • Wow, genial solución! Pero tengo varios carruseles en una página. Así que yo prefiero usar $(this) en lugar de $(".carousel') dentro de la función. Y también me han intercambiado prev y next 🙂
    • He modificado la respuesta
    • Gracias funciona muy bien
    • Excelente! Trabajo como un encanto.
    • Genial, Gracias @Liam. Esto es exactamente lo que estoy buscando.
    • Qué necesitamos para hacer cualquier cambio a esta para usarlo con bootstrap 4 carrusel ?
    • Sí, esto debería funcionar para el Bootstrap 4. Los métodos son los mismos.
    • Por fin! He intentado usar los otros métodos para hacer deslizar el trabajo en Demandware. Su nueva versión, SFRA, ha bootstrap inspirado en las raíces, pero las otras correcciones que se supone que trabaja para el bootstrap no funcionan en Demandware. Esta fue la respuesta! Gracias!

  4. 4

    Ver esta solución:
    Bootstrap TouchCarousel. Una gota en la perfección de Twitter Bootstrap del Carrusel (v3) para activar gestos en dispositivos táctiles.
    http://ixisio.github.io/bootstrap-touch-carousel/

    • Me gusta este enfoque, pero no creo que el paquete está preparado para una configuración de producción todavía. El carrusel tiene algunos de los grandes errores como enlaces/verbos modales no funciona después de carouslel de inicialización etc.
  5. 3

    Si usted no desea utilizar jQuery mobile como me gusta. Usted puede utilizar Hammer.js

    Es prácticamente igual que la de jQuery Mobile sin código innecesario.

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

    Comprueba la solución no es la correcta, a veces de ratón-haga clic derecho en desencadena haga deslizar el dedo.
    después de probar diferentes plugins para deslizar he encontrado un casi perfecto.

    touchSwipe

    dije «casi», porque este plugin no es compatible con el futuro de los elementos. así que será necesario reinicializar el pase llamar al deslizar el contenido se cambia por ajax o algo. este plugin tiene un montón de opciones para jugar con eventos de toque como el multi-finger-touch,una pizca etc.

    http://labs.rampinteractive.co.uk/touchSwipe/demos/index.html

    solución 1 :

    $("#myCarousel").swipe( {
                swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
    
                    if(direction=='left'){
                        $(this).carousel('next');
                    }else if(direction=='right'){
                        $(this).carousel('prev');
                    }
    
                }
            });

    solución 2:(para futuras elemento de caso)

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

    Para cualquier persona encontrar esto, pase en carrusel parece ser nativo como de unos 5 días (20 de Octubre de 2018) como por

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

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

    • Puedes dar algo de información sobre cómo activarlo? Estoy usando 4.1.3 y deslizar no está funcionando de forma predeterminada
    • Es probablemente una bonita sombra manera de hacerlo, pero me agarró el .js desde la vista previa de la página que trabaja con deslizamiento es decir, deploy-preview-25776–twbs-bootstrap4.netlify.com/docs/4.1/dist/… por Lo que no es muy nativas, sino que debe estar cerca.
    • Wow, la diferencia entre la Producción 4.1.3 y su versión enlazada es tan diferente – 462 diferencias. Da un poco de miedo al considerar el uso de ella.
    • Yo estaba tratando de encontrar una manera de poner en práctica un «Flagelo» del evento para el carrusel, pero sí, la functionnality hay (nativo), pero sólo funciona si usted está en un dispositivo móvil. getbootstrap.com/docs/4.3/components/carousel/#with-controls
  8. 0

    Misma funcionalidad prefiero que el uso de pesada de jQuery mobile es Carrusel De Pasar El Dedo. sugiero saltar directamente en el código fuente en github, y copiar el archivo carousel-swipe.js en el directorio del proyecto.

    Uso de swiper eventos como el bramido:

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

Dejar respuesta

Please enter your comment!
Please enter your name here