hacer - slider de imagenes jquery
Carrusel Bootstrap: ¿Cómo deslizar dos controles deslizantes de carrusel al mismo tiempo? (2)
Para evitar este retraso, puede iniciar manualmente ambos carruseles al mismo tiempo y utilizar tratamientos personalizados para eventos.
Opción 1 :
- Init sincronizado
- Eventos de lanzamiento simples en ambos carruseles
- Pausa en el vuelo estacionario (echaba de menos que no lo necesitabas)
$(''.carousel-sync'').carousel(''cycle'');
$(''.carousel-sync'').on(''click'', ''.carousel-control[data-slide]'', function (ev) {
ev.preventDefault();
$(''.carousel-sync'').carousel($(this).data(''slide''));
});
$(''.carousel-sync'').on(''mouseover'', function(ev) {
ev.preventDefault();
$(''.carousel-sync'').carousel(''pause'');
});
$(''.carousel-sync'').on(''mouseleave'', function(ev) {
ev.preventDefault();
$(''.carousel-sync'').carousel(''cycle'');
});
<div id="carousel-a" class="carousel slide carousel-sync">
...
</div>
<div id="carousel-b" class="carousel slide carousel-sync">
...
</div>
Opcion 2
- Init desincronizado
- Duplicar eventos en ambos carruseles tan pronto como ocurra
- Sin pausa en el vuelo estacionario
$(''.carousel-sync'').on(''slide.bs.carousel'', function(ev) {
// get the direction, based on the event which occurs
var dir = ev.direction == ''right'' ? ''prev'' : ''next'';
// get synchronized non-sliding carousels, and make''em sliding
$(''.carousel-sync'').not(''.sliding'').addClass(''sliding'').carousel(dir);
});
$(''.carousel-sync'').on(''slid.bs.carousel'', function(ev) {
// remove .sliding class, to allow the next move
$(''.carousel-sync'').removeClass(''sliding'');
});
<div id="carousel-a" class="carousel slide carousel-sync" data-ride="carousel" data-pause="false">
...
</div>
<div id="carousel-b" class="carousel slide carousel-sync" data-ride="carousel" data-pause="false">
...
</div>
Por favor, no es necesaria la clase .sliding , para evitar un ciclo infinito.
Tengo tres controles deslizantes en el carrusel en una página y quiero que muevan dos de ellos al mismo tiempo. Es posible que ambos cambien las imágenes del control deslizante al mismo tiempo. Ambos tienen la misma cantidad de imágenes / diapositivas. Aquí está el código que estoy usando:
jQuery(''#carousel-example-generic1, #carousel-example-generic2'').carousel({
interval: 4000
});
Y también probé este código a continuación:
jQuery(''.carousel'').carousel({
pause:''false''
});
jQuery(''#carousel-example-generic1'').on(''slide'', function(){
jQuery(''#carousel-example-generic2'').carousel(''next'');
});
Pero los controles deslizantes izquierdo y derecho tienen muy poco retraso en el cambio de diapositivas. Y esta demora va en aumento. ¿Algún problema conocido con este tipo de problema? El enlace al sitio es esto .
JSFiddle: Enlace
Lo siento si me he perdido algo en la pregunta, pero si desea sincronizar los carruseles superior e inferior, puede enganchar el evento slid , a diferencia del evento slide .
JS:
jQuery(''#carousel-example-generic2'').carousel({
pause:''false''
});
jQuery(''#carousel-example-generic2'').on(''slid'', function(){
jQuery(''#carousel-example-generic1'').carousel(''next'');
});