Mein Code funktioniert nicht in Chrome, funktioniert aber in JSFiddle

Question

Also habe ich ein Problem. Ich fand einen Code für ein Karussell, das ich gut fand. Ich habe versucht, es in neue HTML-, CSS- und JS-Dateien zu kopieren, um die Datei zu öffnen, aber das Karussell funktioniert in Chrome nicht, obwohl es in JSFiddle und Codepin funktioniert.

Er sagt, dass der Code ($ (document) .keydown (function (e) {ist) abgefangene Reference ist. Definiert $ nicht

Ihnen im Voraus für Ihre Hilfe danken

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'); 
 
});

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

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
 
<main> 
 
<link rel="stylesheet" href="Carousel.css"> 
 
<script src="Carousel.js"></script> 
 

 
    <div id="carousel"> 
 

 
     <div class="hideLeft"> 
 
     <img src="https://s16.postimg.org/vklrwoxtx/cover9.jpg"> 
 
     </div> 
 

 
     <div class="prevLeftSecond"> 
 
     <img src="https://s16.postimg.org/cgsggckzp/cover8.jpg"> 
 
     </div> 
 

 
     <div class="prev"> 
 
     <img src="https://s16.postimg.org/emmrauog5/cover7.jpg"> 
 
     </div> 
 

 
     <div class="selected"> 
 
     <img src="https://s16.postimg.org/9drqcz611/cover1.jpg"> 
 
     </div> 
 

 
     <div class="next"> 
 
     <img src="https://s16.postimg.org/pnhwfvgp1/cover6.jpg"> 
 
     </div> 
 

 
     <div class="nextRightSecond"> 
 
     <img src=" 
 
https://s16.postimg.org/edp6kxbnp/cover4.jpg"> 
 
     </div> 
 

 
     <div class="hideRight"> 
 
     <img src="https://s16.postimg.org/fij8qay4l/cover3.jpg"> 
 
     </div> 
 

 
    </div> 
 

 
    <div class="buttons"> 
 
     <button id="prev">Prev</button> 
 
     <button id="next">Next</button> 
 
    </div> 
 

 
    </main>

!

Answer 1

Sie sollten für document ready Ereignis warten, bevor Ihr JS läuft.

$(document).ready(function() { 
//your code here 
});