hacer - swipe jquery
Cómo hacer que el control deslizante del carrusel Bootstrap use deslizamiento móvil hacia la izquierda/derecha (7)
<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 funcionalidad de deslizamiento táctil hacia la izquierda / derecha solo para dispositivos móviles. ¿Cómo puedo hacer eso?
Además, ¿cómo hago los botones prev / next, que aparecen en hover, más pequeños para las versiones de móvil / ipad?
Gracias
La misma funcionalidad que prefiero que usar mucho jQuery mobile pesado es Carousel Swipe. Sugiero directamente saltar al código fuente en github y copiar el archivo carousel-swipe.js en su directorio de proyecto.
Use eventos swiper como abajo:
$(''#carousel-example-generic'').carousel({
interval: false
});
La solución comprobada no es precisa; a veces, con el botón derecho del mouse, se activa el deslizamiento hacia la derecha. Después de probar diferentes complementos para deslizar, encontré uno casi perfecto.
Dije "casi" porque este complemento no admite elementos futuros. por lo que tendríamos que reiniciar la llamada de barrido cuando el contenido del deslizamiento se cambia por ajax o algo así. este complemento tiene muchas opciones para jugar con eventos táctiles como tocar con varios dedos, pellizcar, etc.
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 el futuro caso del elemento)
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");
Llego un poco tarde a la fiesta, pero aquí hay un poco de jQuery que 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");
});
});
No es necesario jQuery para dispositivos móviles o cualquier otro complemento. Si necesita ajustar la sensibilidad del deslizamiento, ajuste el 5 y el -5 . Espero que esto ayude a alguien.
Necesitaba agregar esta funcionalidad a un proyecto en el que estaba trabajando recientemente y agregar jQuery Mobile solo para resolver este problema parecía exagerado, así que se me ocurrió una solución y la puse en github: bcSwipe (Bootstrap Carousel Swipe) .
Es un plugin jQuery liviano (~ 600 bytes minified vs jQuery Mobile touch events a 8kb), y ha sido probado en Android e iOS.
Así es como lo usas:
$(''.carousel'').bcSwipe({ threshold: 50 });
Si no quieres usar jQuery mobile como yo. Puedes usar Hammer.js
Es principalmente como 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'');
});
});
Vea esta solución: Bootstrap TouchCarousel. Una perfección sin precedentes para Twitter Bootstrap''s Carousel (v3) para habilitar los gestos en los dispositivos táctiles. http://ixisio.github.io/bootstrap-touch-carousel/
ACTUALIZAR:
Se me ocurrió esta solución cuando era bastante nuevo en el diseño web. Ahora que soy más viejo y más prudente, la respuesta que dio Mark Shiraldi parece ser una mejor opción. Ver la siguiente respuesta superior; es una solución más productiva.
Trabajé en un proyecto recientemente y este ejemplo funcionó perfectamente. Te estoy dando el enlace a continuación.
Primero debes agregar jQuery mobile:
Esto agrega la funcionalidad táctil, y luego solo tiene que hacer eventos como deslizar:
<script>
$(document).ready(function() {
$("#myCarousel").swiperight(function() {
$(this).carousel(''prev'');
});
$("#myCarousel").swipeleft(function() {
$(this).carousel(''next'');
});
});
</script>
El enlace está debajo, donde puedes encontrar el tutorial que utilicé:
http://lazcreative.com/blog/how-to/how-to-adding-swipe-support-to-bootstraps-carousel/