Estoy trabajando para incluir un carrusel de imágenes solo CSS/HTML/JS en mi sitio. Sin embargo, usando el siguiente código, no puedo hacer que el carrusel se muestre inicialmente debido a la display:hidden . El problema con el que me encuentro es que si solo tengo la imagen indicada en img en el CSS, termino aplicando esos mismos estilos a todas las demás imágenes de la página. Intenté usar .image-box img como selector de CSS, pero como mencioné, parece interferir con la propiedad display: hidden .
¡Cualquier sugerencia sería muy apreciada!
CSS:
.carousel-container { width: 500px; padding: 0; margin: 0 auto 4rem auto; height: 350px; } .image-box { width: 500px; height: 350px; } .image-box img { border-radius: 20px; display: none; } .active { display: block; } .indicators { width: 250px; margin: 20px auto 0 auto; display: flex; align-items: center; justify-content: space-around; } .indicators button { height: 10px; outline: none; cursor: pointer; width: 10px; border-radius: 100%; border: 1px solid #c4c4c4; background: none; } .indicators button:nth-child(1){ background-color: #c4c4c4; }``` <br> HTML
<body> <div class="carousel-container"> <div class="image-box"> <img src="image1.png" id="carousel1" class="active"> <img src="image2.png" id="carousel2"> <img src="image3.png" id="carousel3"> </div> <div class="indicators"> <button onclick = "dot(1)"></button> <button onclick = "dot(2)"></button> <button onclick = "dot(3)"></button> </div> </div> </body>
JS:
const dots = document.querySelectorAll(".indicators button"); const images = document.querySelectorAll(".image-box img"); let i = 0; let j = 3; function indicator(num){ dots.forEach(function(dot){ dot.style.backgroundColor = "transparent"; }); document.querySelector(".indicators button:nth-child(" + num + ")").style.backgroundColor = "#c4c4c4"; } function dot(index){ images.forEach(function(image){ image.classList.remove("active"); }); document.getElementById("carousel" + index).classList.add("active"); i = index - 1; indicator(index); }