Bootstrap 3.3.4 Многофункциональный слайдер (карусель)

Question

Я пытаюсь получить работу с карусели Boostrap с отдельными 4 элементами. Я использую этот JS-код:

$('.carousel[data-type="multi"] .item').each(function() { 
    var next = $(this).next(); 
    if (!next.length) { 
    next = $(this).siblings(':first'); 
    } 
    next.children(':first-child').clone().appendTo($(this)); 

    for (var i=0;i<2;i++) { 
    next=next.next(); 
    if (!next.length) { 
     next = $(this).siblings(':first'); 
    } 

    next.children(':first-child').clone().appendTo($(this)); 
    } 
}); 

И это CSS:

@media only screen (max-width: 767px) and (transform-3d), (-webkit-transform-3d) { 
    .carousel-inner > .item.next, 
    .carousel-inner > .item.active.right { 
     left: 0; 
     -webkit-transform: translate3d(100%, 0, 0); 
     transform: translate3d(100%, 0, 0); 
    } 
    .carousel-inner > .item.prev, 
    .carousel-inner > .item.active.left { 
     left: 0; 
     -webkit-transform: translate3d(-100%, 0, 0); 
     transform: translate3d(-100%, 0, 0); 
    } 
} 
@media only screen (min-width: 767px) and (max-width: 992px) and (transform-3d), (-webkit-transform-3d) { 
    .carousel-inner > .item.next, 
    .carousel-inner > .item.active.right { 
     left: 0; 
     -webkit-transform: translate3d(50%, 0, 0); 
     transform: translate3d(50%, 0, 0); 
    } 
    .carousel-inner > .item.prev, 
    .carousel-inner > .item.active.left { 
     left: 0; 
     -webkit-transform: translate3d(-50%, 0, 0); 
     transform: translate3d(-50%, 0, 0); 
    } 
} 
@media only screen (min-width: 992px) and (transform-3d), (-webkit-transform-3d) { 
    .carousel-inner > .item.next, 
    .carousel-inner > .item.active.right { 
     left: 0; 
     -webkit-transform: translate3d(25%, 0, 0); 
     -moz-transform: translate3d(25%, 0, 0); 
     -ms-transform: translate3d(25%, 0, 0); 
     transform: translate3d(25%, 0, 0); 
    } 
    .carousel-inner > .item.prev, 
    .carousel-inner > .item.active.left { 
     left: 0; 
     -webkit-transform: translate3d(-25%, 0, 0); 
     -moz-transform: translate3d(-25%, 0, 0); 
     -ms-transform: translate3d(-25%, 0, 0); 
     transform: translate3d(-25%, 0, 0); 
    } 
} 

И это решение работает в новейший Chrome, но не работает в Firefox, IE, Chrome Mobile и Mobile Firefox. Что я делаю неправильно? Я думаю, эта проблема может быть в поддержке преобразования в других браузерах ... И второй вопрос: как сделать в мобильном видимом только один элемент? Таким образом, на ПК я могу видеть 4 элемента, на мобильных устройствах только 1 элемент.

Items выглядит следующим образом:

<div class="item active"> 
    <div class="col-md-3 col-sm-6 col-xs-12"> 
     something... 
    </div> 
</div> 

Answer 1

Я нашел this solution для вашей проблемы. Я использовал 4 пунктов в одной строке, и изменил CSS, как это:

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

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

.carousel-inner .active.left { left: -25%; } 
.carousel-inner .active.right { left: 25%; } 
.carousel-inner .next  { left: 25%; } 
.carousel-inner .prev  { left: -25%; } 

И JavaScript код, как:

$('.carousel .item').each(function() { 
var next = $(this).next(); 
if (!next.length) { 
    next = $(this).siblings(':first'); 
} 
next.children(':first-child').clone().appendTo($(this)); 

for (var i = 0; i < 2; i++) { 
    next = next.next(); 
    if (!next.length) { 
     next = $(this).siblings(':first'); 
    } 

    next.children(':first-child').clone().appendTo($(this)); 
} 
});