title: My code won't work in Chrome but works fine in JSFiddle
body: <p>So I am having a problem. I found a code of a carousel online which I tought was good. I tried to copy it into new html, css and js files, for so to open the file, but the carousel won't work in Chrome even though it works fine in JSFiddle and Codepin. </p>
  
  <p>It says that the code ( $(document).keydown(function(e) { is ) is uncaught ReferenceError: $ is not defined.</p>
  
  <p>Thank you for your help in advance!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function moveToSelected(element) {
  
    if (element == "next") {
      var selected = $(".selected").next();
    } else if (element == "prev") {
      var selected = $(".selected").prev();
    } else {
      var selected = element;
    }
  
    var next = $(selected).next();
    var prev = $(selected).prev();
    var prevSecond = $(prev).prev();
    var nextSecond = $(next).next();
  
    $(selected).removeClass().addClass("selected");
  
    $(prev).removeClass().addClass("prev");
    $(next).removeClass().addClass("next");
  
    $(nextSecond).removeClass().addClass("nextRightSecond");
    $(prevSecond).removeClass().addClass("prevLeftSecond");
  
    $(nextSecond).nextAll().removeClass().addClass('hideRight');
    $(prevSecond).prevAll().removeClass().addClass('hideLeft');
  
  }
  
  // Eventos teclado
  $(document).keydown(function(e) {
      switch(e.which) {
          case 37: // left
          moveToSelected('prev');
          break;
  
          case 39: // right
          moveToSelected('next');
          break;
  
          default: return;
      }
      e.preventDefault();
  });
  
  $('#carousel div').click(function() {
    moveToSelected($(this));
  });
  
  $('#prev').click(function() {
    moveToSelected('prev');
  });
  
  $('#next').click(function() {
    moveToSelected('next');
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body, main {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  
  #carousel {
    position: relative;
    height: 400px;
    top: 50%;
    transform: translateY(-50%);
    overflow: hidden;
  }
  #carousel div {
    position: absolute;
    transition: transform 1s, left 1s, opacity 1s, z-index 0s;
    opacity: 1;
  }
  #carousel div img {
    width: 400px;
    transition: width 1s;
  }
  #carousel div.hideLeft {
    left: 0%;
    opacity: 0;
    transform: translateY(50%) translateX(-50%);
  }
  #carousel div.hideLeft img {
    width: 200px;
  }
  #carousel div.hideRight {
    left: 100%;
    opacity: 0;
    transform: translateY(50%) translateX(-50%);
  }
  #carousel div.hideRight img {
    width: 200px;
  }
  #carousel div.prev {
    z-index: 5;
    left: 30%;
    transform: translateY(50px) translateX(-50%);
  }
  #carousel div.prev img {
    width: 300px;
  }
  #carousel div.prevLeftSecond {
    z-index: 4;
    left: 15%;
    transform: translateY(50%) translateX(-50%);
    opacity: 0.7;
  }
  #carousel div.prevLeftSecond img {
    width: 200px;
  }
  #carousel div.selected {
    z-index: 10;
    left: 50%;
    transform: translateY(0px) translateX(-50%);
  }
  #carousel div.next {
    z-index: 5;
    left: 70%;
    transform: translateY(50px) translateX(-50%);
  }
  #carousel div.next img {
    width: 300px;
  }
  #carousel div.nextRightSecond {
    z-index: 4;
    left: 85%;
    transform: translateY(50%) translateX(-50%);
    opacity: 0.7;
  }
  #carousel div.nextRightSecond img {
    width: 200px;
  }
  
  .buttons {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-2.2.4.min.js"&gt;&lt;/script&gt;
  &lt;main&gt;
  &lt;link rel="stylesheet" href="Carousel.css"&gt;
  &lt;script src="Carousel.js"&gt;&lt;/script&gt;
  
      &lt;div id="carousel"&gt;
  
         &lt;div class="hideLeft"&gt;
          &lt;img src="https://s16.postimg.org/vklrwoxtx/cover9.jpg"&gt;
        &lt;/div&gt;
  
        &lt;div class="prevLeftSecond"&gt;
          &lt;img src="https://s16.postimg.org/cgsggckzp/cover8.jpg"&gt;
        &lt;/div&gt;
  
        &lt;div class="prev"&gt;
          &lt;img src="https://s16.postimg.org/emmrauog5/cover7.jpg"&gt;
        &lt;/div&gt;
  
        &lt;div class="selected"&gt;
          &lt;img src="https://s16.postimg.org/9drqcz611/cover1.jpg"&gt;
        &lt;/div&gt;
  
        &lt;div class="next"&gt;
          &lt;img src="https://s16.postimg.org/pnhwfvgp1/cover6.jpg"&gt;
        &lt;/div&gt;
  
        &lt;div class="nextRightSecond"&gt;
          &lt;img src="
  https://s16.postimg.org/edp6kxbnp/cover4.jpg"&gt;
        &lt;/div&gt;
  
        &lt;div class="hideRight"&gt;
          &lt;img src="https://s16.postimg.org/fij8qay4l/cover3.jpg"&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div class="buttons"&gt;
        &lt;button id="prev"&gt;Prev&lt;/button&gt;
        &lt;button id="next"&gt;Next&lt;/button&gt;
      &lt;/div&gt;
  
    &lt;/main&gt;</code></pre>
  </div>
  </div>
  </p>