Bootstrap Carousel Çoklu Öğeler Bir Öğeyi bir kerede taşıyın

Question

Önyükleme kullanarak birden fazla öğe karuseli oluşturmaya çalıştım. Benim sorunum, 3 öğeyi bir tanesinde değil de bir tanesiyle hareket ettiriyor. demo buraya bakınız:

http://plnkr.co/edit/Fl0HZaU5x5ZkPEVo87u3?p=preview

$('#myCarousel').carousel({ 
    interval: 10000 
    }) 
    console.log($('.item')) 
    $('.item').each(function() { 

    var next = $(this).next(); 
    console.log(next); 
    if (!next.length) { 
     next = $(this).siblings(':first'); 
    } 
    next.children(':first-child').clone().appendTo($(this)); 

    if (next.next().length > 0) { 
     next.next().children(':first-child').clone().appendTo($(this)); 
    } else { 
     $(this).siblings(':first').children(':first-child').clone().appendTo($(this)); 
    } 
    }); 

Answer 1

Bootstrap CSS3 atlıkarınca 3.3.0 dönüştürür eklendi. Aşağıdaki css ekleme #13074

Bkz bunu düzeltir:

.carousel-inner > .item.next, 
.carousel-inner > .item.active.right { 
    left: 0; 
    -webkit-transform: translate3d(33%, 0, 0); 
    -ms-transform: translate3d(33%, 0, 0); 
    -o-transform: translate3d(33%, 0, 0); 
    transform: translate3d(33%, 0, 0); 
} 


.carousel-inner > .item.prev, 
.carousel-inner > .item.active.left { 
    left: 0; 
    -webkit-transform: translate3d(-33%, 0, 0); 
    -ms-transform: translate3d(-33%, 0, 0); 
    -o-transform: translate3d(-33%, 0, 0); 
    transform: translate3d(-33%, 0, 0); 
} 

Bootply