2017-10-21 98 views
-2

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.Mon code ne fonctionnera pas dans Chrome mais fonctionne bien dans JSFiddle

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>
!

+0

Votre extrait fonctionne très bien. Comment testez-vous cela dans votre section locale? –

+4

Avez-vous vérifié la présence de messages d'erreur sur la console du navigateur? En outre, l'exécution de HTML dans l'environnement 'file: ///' peut causer des problèmes. –

+0

Non, il dit: Uncaught ReferenceError: $ n'est pas défini à Carousel.js: 30, alors il s'agit d'une ligne rouge sous ce code: $ (document) .keydown (fonction (e) {, –

Répondre

0

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

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