1

estuve intentando crear un carrusel de imágenes aplicándole al carrusel un scrollLeft con JavaScript, y funciono perfectamente. El problema esta en que si intentas darle varios clicks a la flecha que cambia de imagen, ya sea hacia adelante o hacia atrás, puedes observar un pequeño bug en el cual se muestra en la pantalla la mitad de una imagen y la mitad de la imagen que le sigue o le antecede. Agradecería mucho si alguien me puede ayudar con este problema, muchas gracias!

codigo HTML

 <main>
    <div class="carousel-container">
        <button class="before" id="before" role="button"><i class="fa-solid fa-angle-left"></i></button>

        <div class="carousel" id="carousel">
            <div class="image image1">
                <img src="images/image-product-1.jpg" alt="">
            </div>
            <div class="image image2">
                <img src="images/image-product-2.jpg" alt="">
            </div>
            <div class="image image3">
                <img src="images/image-product-3.jpg" alt="">
            </div>
            <div class="image image4">
                <img src="images/image-product-4.jpg" alt="">
            </div>
        </div>

        <button class="next" id="next" role="button"><i class="fa-solid fa-angle-right"></i></button>
    </div>
</main>

Codigo CSS

    *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: sans-serif;
    font-size: 16px;
}

.carousel-container{
    display: flex;
    align-items: center;
    position: relative;
    margin: auto;
    width: 600px;
    height: 100vh;
    button{
        border: none;
        color: #fff;
        padding: 40px 20px;
        background: rgba(0,0,0,0.5);
        transition: .3s all ease;
        cursor: pointer;
        position: absolute;
        z-index: 1000;
        &:hover{
            background: #000;
        }
    }
    .before{
        left: 0;
    }
    .next{
        right: 0;
    }
    .carousel{
        display: flex;
        flex-wrap: nowrap;
        overflow: hidden;
        width:600px;
        scroll-behavior: smooth;
        .image{
            min-width: 100%;
            img{
                width: 100%;
            }
        }
    }
}

Codigo JavaScript

const before = document.getElementById("before");
const next = document.getElementById("next");
const carousel = document.getElementById("carousel");
const carouselImages = document.querySelectorAll(".image");
let contador = 0;

next.addEventListener("click",(e)=>{
    let carouselWidth = carousel.clientWidth;
    carousel.scrollLeft += carouselWidth;
    if(contador < carouselImages.length){
        contador++;
    }
    if(contador == carouselImages.length){
        carousel.scrollLeft = carousel.clientWidth - (carouselImages.length * carousel.clientWidth);
        contador = 0;
    }
})

before.addEventListener("click",()=>{
    let carouselWidth = carousel.clientWidth;
    carousel.scrollLeft -= carouselWidth;
    if(contador > 1 ){
        contador--;
    }
})

1 respuesta 1

0

Para el boton de la derecha, puedes calcular la diferencia que hay entre el scrollLeft que ya tienes mas el que le vas a sumar.

 const before = document.getElementById("before");
 const next = document.getElementById("next");
 const carousel = document.getElementById("carousel");
 const carouselImages = document.querySelectorAll(".image");
 let contador = 1;

 next.addEventListener("click", (e) => {
      let carouselWidth = carousel.clientWidth;
      carousel.scrollLeft += (carouselWidth * contador ) - carousel.scrollLeft;
      if (contador == carouselImages.length) {
           carousel.scrollLeft = carousel.clientWidth - (carouselImages.length * carousel.clientWidth);
           contador = 1;
      }else
           contador++;
 })

Para no tener que hacer tanta validacion defino el contador en 1 como valor minimo por default. Y para el retorno creo que solo basta con checar cuanto scroll deberia de tener dependiendo del contador al que a cual deberia de ir, y quitarle el width actual

 before.addEventListener("click", () => {
      let carouselWidth = carousel.clientWidth;
      if (contador > 1) {
           contador--;
      } 
      carousel.scrollLeft = (carouselWidth * contador) - carouselWidth;
 })

Eso si, esto creo solo haria que si le diera dos clicks rapidos o tres se saltara esas dos o tres imagenes, no permaneceria en la siguiente.

Nos comentas si es lo que quieres o si te ayuda, saludos.

2
  • era exactamente lo que necesitaba, me fue de gran ayuda, muchas gracias! el 8 mar. 2022 a las 12:06
  • @DanielAlves si esta respuesta soluciona tu problema deberias aceptarla para que la pregunta no quede pendiente eternamente. Mírate este enlace para aprender a aceptar respuestas, gracias. De paso haz el recorrido de bienvenida para aprender cómo funciona este sitio.
    – masterguru
    el 9 mar. 2022 a las 9:53

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.