title: bootstrap carousel translate3d override not working for firefox, IE
body: <p>I've been trying to modify the Bootstrap 3.3.5 Carousel to have multiple images display instead of the standard single image. The method involves overriding the stock translate3d transform values for the slide action to make it so it only advances one at a time when moving between images. I've used the transform override from <a href="https://stackoverflow.com/questions/32408101/show-multiple-slides-move-one-using-bootstrap-3-3-5-carousel">this post</a> with customizations. Here's a <a href="http://codepen.io/anon/pen/xwJPee" rel="nofollow noreferrer">pen</a> of my basic setup. </p>
  
  <p>It all works fine until I try it in firefox (and also IE). The translate3d effect doesn't work at all. From what I've read about <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#translate3d()" rel="nofollow noreferrer">firefox's implementation</a> of translate3d it should work (v41.0.2). I originally thought FF didn't like the percentages but the link I just mentioned only says no percentages for the tz value. So I'm at a loss as to why it's not working.</p>
  
  <p>I'm a massive noob at this so I'm guessing someone will just take one look at it and blow my mind but I'd really like to know why it's happening before I move onto other methods. </p>
  
  <p>I appreciate any input if you have the time, thanks.</p>
  
  <p>Here's my code (the codepen version works the way it should but the embedded snippet here doesn't for some reason)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var mod_screen = function() {
      
      /* Cleanup extra divs that were added in previous resizing  */
      $('.item').each( function (){
          $(this).children('div:not(:first)').remove();  
      });
      
      $('.carousel .item').each(function(){
          
          var next = $(this).next(), i;
          
              
          if (Modernizr.mq('(min-width: 768px) and (max-width: 991px)')) {
          
              /* Small screen sizes */
              if (!next.length) {
                  next = $(this).siblings(':first');
              }
              next.children(':first-child').clone().appendTo($(this));
  
          } else if (Modernizr.mq('(min-width: 992px) and (max-width: 1199px)')) {
          
              /* Medium screen sizes */
              if (!next.length) {
                  next = $(this).siblings(':first');
              }
              next.children(':first-child').clone().appendTo($(this));
  
              for (i=0;i&lt;1;i++) {
                  next=next.next();
                  if (!next.length) {
                      next = $(this).siblings(':first');
                  }
                  next.children(':first-child').clone().appendTo($(this));
              }
              
          } else if (Modernizr.mq('(min-width: 1200px)')) {
          
              /* Large screen sizes */
              if (!next.length) {
                  next = $(this).siblings(':first');
              }
              next.children(':first-child').clone().appendTo($(this));
  
              for (i=0;i&lt;2;i++) {
                  next=next.next();
                  if (!next.length) {
                      next = $(this).siblings(':first');
                  }
                  next.children(':first-child').clone().appendTo($(this));
              }
          }
      });
  }
  
  $(function() {
  // Call on every window resize
  $(window).resize(mod_screen);
  // Call once on initial load
  mod_screen();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@media screen and (min-width: 768px) and (max-width: 991px) {
      
      .carousel-inner .active.left { left: -50%; }
      .carousel-inner .next        { left: 50%; }
  
      .carousel-inner &gt; .item.next,
      .carousel-inner &gt; .item.active.right {
          left: 0;
          transform: translate3d(50%, 0, 0);
      -webkit-transform: translate3d(50%, 0, 0);
      }
  
      .carousel-inner &gt; .item.prev,
      .carousel-inner &gt; .item.active.left {
          left: 0;
          transform: translate3d(-50%, 0, 0);
      -webkit-transform: translate3d(-50%, 0, 0);
      }
  }
  
  @media screen and (min-width: 992px) and (max-width: 1199px) {
      .carousel-inner .active.left { left: -33.3333%; }
      .carousel-inner .next        { left: 33.3333%; }
  
      .carousel-inner &gt; .item.next,
      .carousel-inner &gt; .item.active.right {
          left: 0;
          transform: translate3d(33.3333%, 0, 0);
      -webkit-transform: translate3d(33.3333%, 0, 0);
      }
  
      .carousel-inner &gt; .item.prev,
      .carousel-inner &gt; .item.active.left {
          left: 0;
          transform: translate3d(-33.3333%, 0, 0);
      -webkit-transform: translate3d(-33.3333%, 0, 0);
      }   
  }
  
  @media screen and (min-width: 1200px) {
      .carousel-inner .active.left { left: -25%; }
      .carousel-inner .next        { left: 25%; }
  
      .carousel-inner &gt; .item.next,
      .carousel-inner &gt; .item.active.right {
          left: 0;
          transform: translate3d(25%, 0, 0);
      -webkit-transform: translate3d(25%, 0, 0);
      }
  
      .carousel-inner &gt; .item.prev,
      .carousel-inner &gt; .item.active.left {
          left: 0;
          transform: translate3d(-25%, 0, 0);
      -webkit-transform: translate3d(-25%, 0, 0);
      }   
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="container-fluid"&gt;
      &lt;div class="row carousel slide" id="index-carousel-lg"&gt;
          &lt;div class="carousel-inner"&gt;
              &lt;div class="item active"&gt;
                  &lt;div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"&gt;
                      &lt;a href="#"&gt;&lt;img src="http://placehold.it/475x150&amp;text=01" class="img-responsive"&gt;&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="item"&gt;
                  &lt;div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"&gt;
                      &lt;a href="#"&gt;&lt;img src="http://placehold.it/475x150&amp;text=02" class="img-responsive"&gt;&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="item"&gt;
                  &lt;div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"&gt;
                      &lt;a href="#"&gt;&lt;img src="http://placehold.it/475x150&amp;text=03" class="img-responsive"&gt;&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="item"&gt;
                  &lt;div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"&gt;
                      &lt;a href="#"&gt;&lt;img src="http://placehold.it/475x150&amp;text=04" class="img-responsive"&gt;&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="item"&gt;
                  &lt;div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"&gt;
                      &lt;a href="#"&gt;&lt;img src="http://placehold.it/475x150&amp;text=05" class="img-responsive"&gt;&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="item"&gt;
                  &lt;div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"&gt;
                      &lt;a href="#"&gt;&lt;img src="http://placehold.it/475x150&amp;text=06" class="img-responsive"&gt;&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="item"&gt;
                  &lt;div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"&gt;
                      &lt;a href="#"&gt;&lt;img src="http://placehold.it/475x150&amp;text=07" class="img-responsive"&gt;&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="item"&gt;
                  &lt;div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"&gt;
                      &lt;a href="#"&gt;&lt;img src="http://placehold.it/475x150&amp;text=08" class="img-responsive"&gt;&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;a class="left carousel-control" href="#index-carousel-lg" data-slide="prev"&gt;&lt;i class="glyphicon glyphicon-chevron-left"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;a class="right carousel-control" href="#index-carousel-lg" data-slide="next"&gt;&lt;i class="glyphicon glyphicon-chevron-right"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>