0

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:

Codigo Sandbox

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> 

1 respuesta 1

1

para empezar en el sandbox no se pueden usar los eventos 'DOMContentLoaded' por lo que no se va a lanzar nunca. Luego el código que has publicado aquí y en el sandbox son distintos.

En vez de tener infinitas imagenes dentro del carrousel es más facil poner las url´s dentro de un array e irlas cambiando. Te dejo el código para ello.

Al final tienes un botón para ejecutarlo desde el navegador.

Cambia el HTML por este otro

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <section id="section-1">
      <header id="header">
          
          <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="https://fondosmil.com/fondo/29366.jpg" alt="" id="carrouselImg" draggable="false">                
              </div>
          </section>
          <div class="asd"></div>
      </main>
    <script src="./index.mjs" type="module"></script>
  </body>
</html>

Y dentro del js este:

import "./styles.css";

const imgURLS = [
    "https://fondosmil.com/fondo/29366.jpg",
    "https://i.pinimg.com/originals/fe/9c/6b/fe9c6be5759c12298688b2dd97cd5fd1.jpg",
    "https://p4.wallpaperbetter.com/wallpaper/769/76/924/1920x1080-green-mountain-nature-1920x1080-wallpaper-preview.jpg" 
]

const header = document.querySelector("#header");
const carrouselImg = document.querySelector("#carrouselImg");
let currentIndex = 0;


function showImg(index) {
    // Hacemos el array circular para que siempre este dentro
    carrouselImg.src = imgURLS[(index % imgURLS.length + imgURLS.length)%imgURLS.length];
}

function nextImg() {
    currentIndex = currentIndex+1;
    showImg(currentIndex);
}

setInterval(nextImg, 3000);

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";
    }
});

Aqui tienes el ejemplo funcional con todo tú código

const imgURLS = [
    "https://fondosmil.com/fondo/29366.jpg",
    "https://i.pinimg.com/originals/fe/9c/6b/fe9c6be5759c12298688b2dd97cd5fd1.jpg",
    "https://p4.wallpaperbetter.com/wallpaper/769/76/924/1920x1080-green-mountain-nature-1920x1080-wallpaper-preview.jpg" 
]

const header = document.querySelector("#header");
const carrouselImg = document.querySelector("#carrouselImg");
let currentIndex = 0;


function showImg(index) {
    // Hacemos el array circular para que siempre este dentro
    carrouselImg.src = imgURLS[(index % imgURLS.length + imgURLS.length)%imgURLS.length];
}

function nextImg() {
    currentIndex = currentIndex+1;
    showImg(currentIndex);
}

setInterval(nextImg, 3000);

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 0.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: 0.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;
}
<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <section id="section-1">
      <header id="header">
          
          <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="https://fondosmil.com/fondo/29366.jpg" alt="" id="carrouselImg" draggable="false">                
              </div>
          </section>
          <div class="asd"></div>
      </main>
    <script src="./index.mjs" type="module"></script>
  </body>
</html>

2
  • @Andres Gardiol Muchisimas gracias, y como podria hacer para que no sea un cambio de imagen tan brusco si no que tenga alguna animacion? Commented el 18 ago. 2023 a las 17:27
  • Prueba a añadir transiciones por css. Un ejemplo puede ser este (que se produce al hacer hover) jsfiddle.net/pablosgpacheco/01rmg0qL
    – Voxxii
    Commented el 21 ago. 2023 a las 6:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.