Estoy creando una página web usando html, css y JS. Estoy trabajando en un carrusel, pero el problema es que cuando lo veo desde resoluciones superiores a 1920 px, comienzan a bloquearse. He intentado todo, configurando 100vw, 100%, preguntando a chatGPT, agregando consultas de medios, pero la img aún falla cuando la resolución es más alta. Aquí les dejo el código. Realmente no creo que el problema provenga del hecho de que el encabezado está sobre el carrusel, como aparece en el encabezado cuando se desplaza el fondo.
Aquí les dejo un código Sandbox para que lo vean mejor:
const carrousel = document.querySelector(".carrousel");
let currentIndex = 0;
const header = document.querySelector("#header");
const section = document.querySelector("#section-1");
function showImg(index) {
const offset = -index * 100;
carrousel.style.transform = `translateX(${offset}%)`;
}
function nextImg() {
currentIndex = (currentIndex + 1) % 3;
showImg(currentIndex);
}
function prevImg() {
currentIndex = (currentIndex - 1 + 3) % 3;
showImg(currentIndex);
}
setInterval(nextImg, 4000);
window.addEventListener("scroll", () => {
if (window.scrollY > 90) {
header.style.position = "fixed";
header.style.background = "black";
} else if (window.scrollY < 40) {
header.style.position = "absolute";
header.style.background = "none";
}
});
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
#header{
display: flex;
justify-content: space-evenly;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 2;
transition: all .5s;
}
#logo{
width: 90px;
height: 90px;
}
nav{
display: flex;
}
.contenedor-items{
display: flex;
align-items: center;
gap: 4em;
}
a{
font-size: 1.35rem;
color: white;
text-decoration: none;
}
.items{
list-style: none;
transition: .5s;
position: relative;
}
.items::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 3.1px;
background-color: #F2A71B;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.3s ease;
}
li:hover{
transform: scale(1.37);
}
li:hover::after {
transform: scaleX(1);
transform-origin: left;
}
#section-1{
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.carrousel{
display: flex;
transition: transform 0.3s ease-in-out;
}
.carrousel img{
width: 100%;
height: auto;
object-fit: cover;
}
.asd{
height: 500px;
}
<section id="section-1">
<header id="header">
<a href="#"><img src="./img/logo.png" alt="logo" id="logo"></a>
<nav>
<ul class="contenedor-items">
<li class="items"><a href="#">- Nosotros</a></li>
<li class="items"><a href="#">- Clientes</a></li>
<li class="items"><a href="#">- Servicios</a></li>
<li class="items"><a href="#">- Pedi tu cotización</a></li>
</ul>
</nav>
</header>
<main>
<div class="carrousel">
<img src="./img/imagen-principal.jpg" alt="" id="img-1" draggable="false">
<img src="./img/1075053.jpg" alt="" id="img-2" draggable="false">
<img src="./img/yo.jpg" alt="" id="img-3" draggable="false">
</div>
</section>
<div class="asd"></div>
</main>
<script src="./app.js"></script>
</body>