Bootstrap 3.3.4 Multi item slider (Carousel) -

i'm trying working boostrap carousel separate 4 items. use js code:

$('.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));    (var i=0;i<2;i++) {     next=next.next();     if (!next.length) {         next = $(this).siblings(':first');     }      next.children(':first-child').clone().appendto($(this));   } }); 

and css:

@media screen (max-width: 767px) , (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 screen (min-width: 767px) , (max-width: 992px ) , (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 screen (min-width: 992px ) , (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);   } } 

and solution works in newest chrome, doesn't work in firefox, ie, mobile chrome , mobile firefox. i'm doing wrong? think, problem may in transform support in other browsers... , second question: how make in mobile visible 1 item? in pc can see 4 items, on mobile 1 item.

items looks this:

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

i found this solution problem. i've used 4 items in 1 line, , changed css this:

.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%; } 

and javascript code like:

$('.carousel .item').each(function () {  var next = $(this).next();  if (!next.length) {      next = $(this).siblings(':first');  }  next.children(':first-child').clone().appendto($(this));   (var = 0; < 2; i++) {      next = next.next();      if (!next.length) {          next = $(this).siblings(':first');      }       next.children(':first-child').clone().appendto($(this));  } });