title: Bootstrap 3.3.4 Multi item slider (Carousel)
body: <p>I'm trying to get working Boostrap carousel with separate 4 items. I use this JS code:</p>
  
  <pre><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));
  
    for (var i=0;i&lt;2;i++) {
      next=next.next();
      if (!next.length) {
          next = $(this).siblings(':first');
      }
  
      next.children(':first-child').clone().appendTo($(this));
    }
  });
  </code></pre>
  
  <p>And this CSS:</p>
  
  <pre><code>@media only screen (max-width: 767px) and (transform-3d), (-webkit-transform-3d) {
    .carousel-inner &gt; .item.next,
    .carousel-inner &gt; .item.active.right {
        left: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
    .carousel-inner &gt; .item.prev,
    .carousel-inner &gt; .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 &gt; .item.next,
    .carousel-inner &gt; .item.active.right {
        left: 0;
        -webkit-transform: translate3d(50%, 0, 0);
        transform: translate3d(50%, 0, 0);
    }
    .carousel-inner &gt; .item.prev,
    .carousel-inner &gt; .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 &gt; .item.next,
    .carousel-inner &gt; .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 &gt; .item.prev,
    .carousel-inner &gt; .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);
    }
  }
  </code></pre>
  
  <p>And this solution works in newest Chrome, but doesn't work in Firefox, IE, Mobile Chrome and Mobile Firefox. What I'm doing wrong? I think, that problem may be in transform support in other browsers... And second question: How to make in mobile visible only one item? So in PC I can see 4 items, on mobile only 1 item.</p>
  
  <p>Items looks like this:</p>
  
  <pre><code>&lt;div class="item active"&gt;
      &lt;div class="col-md-3 col-sm-6 col-xs-12"&gt;
        something...
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>