부트 스트랩 회전 목마 : 두 개의 회전 목마 슬라이더를 동시에 슬라이드하는 방법은 무엇입니까?

Question

나는 한 페이지에 3 개의 회전 목마 슬라이더를 가지고 있으며 동시에 두 개를 움직여야한다. 둘 다 슬라이더 이미지를 동시에 변경해야합니다. 둘 다 이미지/슬라이드 수가 동일합니다. 여기에 내가 사용하고있는 코드입니다 :

jQuery('#carousel-example-generic1, #carousel-example-generic2').carousel({ 
    interval: 4000 
}); 

그리고 또한 내가 아래에이 코드를 시도 :

jQuery('.carousel').carousel({ 
    pause:'false' 
}); 

jQuery('#carousel-example-generic1').on('slide', function(){ 
    jQuery('#carousel-example-generic2').carousel('next'); 
}); 

그러나 왼쪽과 오른쪽 슬라이더는 슬라이드를 변경에서 약간의 지연이있다. 그리고 이러한 지연은 계속 증가하고 있습니다. 이러한 종류의 문제와 관련하여 알려진 문제가 있습니까? 사이트 링크는 this입니다.

JSFiddle : Link

Answer 1

이 지연을 방지하려면, 수동 두 가지를 동시에 회전 목마를 실행하고, 이벤트에 대한 맞춤형 치료를 사용할 수 있습니다.

옵션 # 1 :

• 동기화 된 안정된 초기화 호버에
• 일시 정지가 모두 회전 목마에
• 간단한 출시 이벤트 (내가 놓친 당신이 그것을 필요로하지 않았다)

$('.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> 

,963,210

옵션 # 2

• Desynchronized 초기화
즉시 모두 회전 목마에
• 중복 이벤트는

$('.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> 

가져가 없음 일시 정지하세요 발생으로아니요.클래스가 필요하므로 무한 루프가 발생하지 않습니다. 내가 질문에 뭔가를 놓친하지만 동기화 상부 및 하부 회전 목마를 원하는 경우 slide 이벤트에 반대, 당신의 slid 이벤트를 연결할 수있는 경우

Bootply example

Answer 2

죄송합니다.

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/