title: 3D carousel with JQuery and CSS - not rendering correctly
body: <p>I'm trying to implement a CD carousel with JQuery and CSS and I've been browsing StackOverflow for some ideas. I came across <a href="https://stackoverflow.com/questions/27640896/3d-carousel-effect">this question</a>. I've been trying to implement the code for idea 2 on my own machine and it doesn't seem to be working.</p>
  
  <p>Here's all the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/* Create an array to hold the different image positions */
  var itemPositions = [];
  var numberOfItems = $('#scroller .item').length;
  
  /* Assign each array element a CSS class based on its initial position */
  function assignPositions() {
    for (var i = 0; i &lt; numberOfItems; i++) {
      if (i === 0) {
        itemPositions[i] = 'left-hidden';
      } else if (i === 1) {
        itemPositions[i] = 'left';
      } else if (i === 2) {
        itemPositions[i] = 'middle';
      } else if (i === 3) {
        itemPositions[i] = 'right';
      } else {
        itemPositions[i] = 'right-hidden';
      }
    }
    /* Add each class to the corresponding element */
    $('#scroller .item').each(function(index) {
      $(this).addClass(itemPositions[index]);
    });
  }
  
  /* To scroll, we shift the array values by one place and reapply the classes to the images */
  function scroll(direction) {
    if (direction === 'prev') {
      itemPositions.push(itemPositions.shift());
    } else if (direction === 'next') {
      itemPositions.unshift(itemPositions.pop());
    }
    $('#scroller .item').removeClass('left-hidden left middle right right-hidden').each(function(index) {
      $(this).addClass(itemPositions[index]);
    });
  }
  
  /* Do all this when the DOMs ready */
  $(document).ready(function() {
  
      console.log("DOM ready")
  
    assignPositions();
    var autoScroll = window.setInterval("scroll('next')", 4000);
  
    /* Hover behaviours */
    $('#scroller').hover(function() {
      window.clearInterval(autoScroll);
      $('.nav').stop(true, true).fadeIn(200);
    }, function() {
      autoScroll = window.setInterval("scroll('next')", 4000);
      $('.nav').stop(true, true).fadeOut(200);
    });
  
    /* Click behaviours */
    $('.prev').click(function() {
      scroll('prev');
    });
    $('.next').click(function() {
      scroll('next');
    });
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,
  body {
    height: 100%;
    margin: 0;
  }
  
  body {
    background: -webkit-linear-gradient(top, #4D4D4D 0, #4D4D4D 180px, #939393 400px);
  }
  
  .warning {
    margin: 10px auto 0;
    width: 500px;
    text-align: center;
    font-size: 20px;
  }
  
  #scroller {
    width: 500px;
    height: 200px;
    margin: 0 auto;
    padding: 50px 0;
    -webkit-perspective: 500px;
    -moz-perspective: 500px;
    -o-perspective: 500px;
  }
  
  #scroller .item {
    width: 500px;
    display: block;
    position: absolute;
    border-radius: 10px;
    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.85, transparent), to(rgba(255, 255, 255, 0.15)));
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    z-index: 0;
  }
  /* Since inset shadows don't play nice with images, we'll create a pseudo element and apply our image styling to that instead */
  
  #scroller .item:before {
    border-radius: 10px;
    width: 500px;
    display: block;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.4);
  }
  
  #scroller .item img {
    display: block;
    border-radius: 10px;
  }
  
  #scroller .left {
    -webkit-transform: rotateY(25deg) translateX(-320px) skewY(-5deg) scale(0.4, 0.6);
    -moz-transform: rotateY(25deg) translateX(-320px) skewY(-5deg) scale(0.4, 0.6);
    -o-transform: rotateY(25deg) translateX(-320px) skewY(-5deg) scale(0.4, 0.6);
  }
  
  #scroller .middle {
    z-index: 1;
    -webkit-transform: rotateY(0deg) translateX(0) scale(1);
    -moz-transform: rotateY(0deg) translateX(0) scale(1);
    -o-transform: rotateY(0deg) translateX(0) scale(1);
  }
  
  #scroller .right {
    -webkit-transform: rotateY(-25deg) translateX(320px) skewY(5deg) scale(0.4, 0.6);
    -moz-transform: rotateY(-25deg) translateX(320px) skewY(5deg) scale(0.4, 0.6);
    -o-transform: rotateY(-25deg) translateX(320px) skewY(5deg) scale(0.4, 0.6);
  }
  
  #scroller .left-hidden {
    opacity: 0;
    z-index: -1;
    -webkit-transform: rotateY(25deg) translateX(-430px) skewY(-5deg) scale(0.3, 0.5);
    -moz-transform: rotateY(25deg) translateX(-430px) skewY(-5deg) scale(0.3, 0.5);
    -o-transform: rotateY(25deg) translateX(-430px) skewY(-5deg) scale(0.3, 0.5);
  }
  
  #scroller .right-hidden {
    opacity: 0;
    z-index: -1;
    -webkit-transform: rotateY(-25deg) translateX(430px) skewY(5deg) scale(0.3, 0.5);
    -moz-transform: rotateY(-25deg) translateX(430px) skewY(5deg) scale(0.3, 0.5);
    -o-transform: rotateY(-25deg) translateX(430px) skewY(5deg) scale(0.3, 0.5);
  }
  
  .nav {
    position: absolute;
    width: 500px;
    height: 30px;
    margin: 170px 0 0;
    z-index: 2;
    display: none;
  }
  .prev,
  .next {
    position: absolute;
    display: block;
    height: 30px;
    width: 30px;
    background-color: rgba(0, 0, 0, 0.85);
    border-radius: 15px;
    color: #E4E4E4;
    bottom: 15px;
    left: 15px;
    text-align: center;
    line-height: 26px;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.7);
  }
  
  .next {
    left: inherit;
    right: 15px;
  }
  
  .prev:hover,
  .next:hover {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.7);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="test.js"&gt;&lt;/script&gt;
          &lt;link href="test.css" rel="stylesheet"/&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="scroller"&gt;
            &lt;div class="nav"&gt;
              &lt;a class="prev"&gt;&amp;laquo;&lt;/a&gt;
              &lt;a class="next"&gt;&amp;raquo;&lt;/a&gt;
            &lt;/div&gt;
            &lt;a class="item" href="#"&gt;
              &lt;img src="http://i.imgur.com/5Mk3EfW.jpg" /&gt;
            &lt;/a&gt;
            &lt;a class="item" href="#"&gt;
              &lt;img src="http://i.imgur.com/79aU67L.jpg" /&gt;
            &lt;/a&gt;
            &lt;a class="item" href="#"&gt;
              &lt;img src="http://i.imgur.com/x3wSoFU.jpg" /&gt;
            &lt;/a&gt;
            &lt;a class="item" href="#"&gt;
              &lt;img src="http://i.imgur.com/27fTqbA.jpg" /&gt;
            &lt;/a&gt;
            &lt;a class="item" href="#"&gt;
              &lt;img src="http://i.imgur.com/RjdFV6n.jpg" /&gt;
            &lt;/a&gt;
            &lt;a class="item" href="#"&gt;
              &lt;img src="http://i.imgur.com/6W8JOza.jpg" /&gt;
            &lt;/a&gt;
            &lt;a class="item" href="#"&gt;
              &lt;img src="http://i.imgur.com/rwLY1JH.jpg" /&gt;
            &lt;/a&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>You can see that in the above snippet the code works fine and as it should, however when I try to run it on my own machine it doesn't work correctly. Below is what it looks like when I load the HTML file on Chrome and Firefox:</p>
  
  <p><a href="https://imgur.com/TG4F0vO" rel="nofollow noreferrer">Firefox</a><br>
  <a href="https://imgur.com/gvXeLR9" rel="nofollow noreferrer">Chrome</a></p>
  
  <p>You can see it's not loading all the elements properly. This has stumped me since the code is literally identical here and on my machine. I'm hosting using Pythons <code>http.server</code> function.</p>
  
  <p>The browser consoles don't give any errors that would hint to what is happening. In fact, both consoles log 'DOM ready' in the <code>$(document).ready</code> function in the JS file, so seemingly everything should be fine.</p>
  
  <p>What could be causing this to happen? </p>
  
  <p>EDIT: I tried changing the order of the script tags in the header but it didn't help</p>