Mon code ne fonctionnera pas dans Chrome mais fonctionne bien dans JSFiddle

Question

J'ai donc un problème. J'ai trouvé un code d'un carrousel en ligne que j'ai trouvé bon. J'ai essayé de le copier dans de nouveaux fichiers html, css et js, pour ainsi ouvrir le fichier, mais le carrousel ne fonctionnera pas dans Chrome, même si cela fonctionne très bien dans JSFiddle et Codepin.

Il dit que le code ($ (document) .keydown (function (e) {est) est uncaught ReferenceError:. $ N'est pas défini

Merci pour votre aide à l'avance

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

Vous devez attendre événement document ready avant de lancer votre JS.

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