बूटस्ट्रैप कैरोसेल मल्टी आइटम एक आइटम को एक साथ ले जाएं

Question

मैंने बूटस्ट्रैप का उपयोग करके एकाधिक आइटम कैरोसेल बनाने की कोशिश की है। मेरी समस्या यह है कि यह सभी 3 वस्तुओं को सिर्फ एक के बजाय ले जाती है। कृपया डेमो यहाँ देखें:

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

बूटस्ट्रैप जोड़ा CSS3 हिंडोला 3.3.0 में बदल देती है। देखें #13074

निम्नलिखित सीएसएस जोड़ा जा रहा है यह ठीक करता है:

.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