hacer - slider de imagenes jquery

Carrusel Bootstrap: ¿Cómo deslizar dos controles deslizantes de carrusel al mismo tiempo?

Question

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

Answer 1

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>

Ejemplo de Bootply

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.

Ejemplo de Bootply

Answer 2

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'');
});

http://jsfiddle.net/FKQS8/5/