Bonjour,
Je suis actuellement en train de programmer un site internet en html, php, css.
Ayant besoin d'un Carousel, la manière la plus facile est d'utiliser du JavaScript.
Je regarde donc des codes de JS vite fait pour comprendre comment le langage marche, puis je fais un Script. Cependant, je ne suis pas certain que la manière employée soit très adaptée, et je rencontre donc une erreur. Ci joint le code :
<div class="carousel" id="carousel">
<div class="preview" id="preview">
<img class="img active" src="https://cdn.pixabay.com/photo/2016/11/19/14/00/code-1839406_960_720.jpg" id="slide-1">
<img class="img" src="https://cdn.pixabay.com/photo/2017/07/07/23/36/beauty-2483155__340.jpg" id="slide-2">
<img class="img" src="https://static.photocdn.pt/images/articles/2019/12/24/images/articles/2019/11/26/photo_shoot_vs_photoshoot_which_is_correct.webp" id="slide-3">
</div>
<div class="control right">
<img src="https://www.pngmagic.com/product_images/arrow-png-icon.png">
</div>
<div class="control left">
<img src="https://www.pngmagic.com/product_images/arrow-png-icon.png">
</div>
<div class="slide" id="slide-1">
<img class="active" src="https://cdn.pixabay.com/photo/2016/11/19/14/00/code-1839406_960_720.jpg">
</div>
<div class="slide" id="slide-2">
<img src="https://cdn.pixabay.com/photo/2017/07/07/23/36/beauty-2483155__340.jpg">
</div>
<div class="slide" id="slide-3">
<img src="https://static.photocdn.pt/images/articles/2019/12/24/images/articles/2019/11/26/photo_shoot_vs_photoshoot_which_is_correct.webp">
</div>
</div>
<script>
var counter = 1;
var controlContainer = document.getElementsByClassName("control");
let controls = controlContainer.querySelectorAll('img');
controls.forEach(control => {
control.addEventListener('click', function (){
if(counter != 1 && this.classList == 'right') {
counter += 1;
};
if(counter != 3 && this.classList == 'left') {
counter -= 1;
};
var imgContainer = document.getElementsByClassName("slide")
let imgs = imgContainer.querySelectorAll('img')
imgs.forEach(im => im.classList.remove('active'));
var new_active_img = document.getElementsById("slide-"+counter.toString());
new_active_img.classList.add('active');
});
});
var btnContainer = document.getElementById("preview");
let buttons = btnContainer.querySelectorAll('img');
buttons.forEach(button => {
button.addEventListener('click', function (){
buttons.forEach(btn => btn.classList.remove('active'));
this.classList.add('active');
});
});
</script>
Le code erreur sur la page Internet en Console étant : "Uncaught TypeError: controlContainer.querySelectorAll is not a function"
Merci d'avance,
Cordialement.
Configuration: Windows / Chrome 98.0.4758.102
Afficher la suite