0

Me guié por un video de youtube (https://www.youtube.com/watch?v=KcdBOoK3Pfw). Lo modifiqué un poquito para que quedara así: introducir la descripción de la imagen aquí

El problema es que sólo queda centrada desde firefox y en la pantalla de mi notebook. apenas lo veo en mi segunda pantalla, la imagen central queda desplazada. El otro problema que tengo es que sólo funciona para imagenes del mismo tamaño.

Este es el código, en general funciona bien, aunque derepente se bugea en chrome y el contador pasa de largo porque no lee el id firstClone o lastClone.

Cualquier sugerencia me ayuda! es primera vez que trabajo con javascript y creo que tengo bastante código para algo que no es tan complejo.

GRACIAS!!!

// Constantes
const carouselSlide = document.querySelector('.carousel-slide');
const carouselImage = document.querySelectorAll('.carousel-slide img');
const body = document.querySelector('.hola');

// Botones
const prevBtn = document.querySelector('#prevBtn');
const nextBtn = document.querySelector('#nextBtn');

// Variables
let counter = 2;
let size = carouselImage[0].clientWidth;
let inicial = body.clientWidth -140 -size;

let posicion = inicial + size*(counter-1);

carouselSlide.style.transform = 'translateX(' + (-posicion -70)  + 'px)';
// el -70 corresponde al margin-right de las fotos.

console.log(carouselImage.length); //10
console.log(body.clientWidth); // 1440
console.log(size); // 779
console.log(inicial); // 521
console.log(posicion); // 1300


let cambioMas = () => {
        carouselSlide.style.transition = "transform 0.5s ease-in-out";
        counter++;
        posicion = inicial + size*(counter-1);
        carouselSlide.style.transform = 'translateX(' + (-posicion -70) + 'px)';
        console.log("contador :" + counter + " posicion :" + posicion);
    }

let cambioMenos = () => {
        carouselSlide.style.transition = "transform 0.5s ease-in-out";
        counter--;
        posicion = inicial + size*(counter-1);
        carouselSlide.style.transform = 'translateX(' + (-posicion - 70) + 'px)';
        console.log(counter);
    }

let timeOut = setInterval(cambioMas, 3500);


// Button Listeners
nextBtn.addEventListener('click',()=>{
    if (counter >= (carouselImage.length-2)) return;
    cambioMas();
    clearInterval(timeOut);
    timeOut = setInterval(cambioMas, 5000);
});

prevBtn.addEventListener('click',()=>{
    if (counter <= -1) return;
    cambioMenos(); 
    clearInterval(timeOut);
    timeOut = setInterval(cambioMas, 4000);
});


carouselSlide.addEventListener('transitionend', ()=>{
    if (carouselImage[counter].id === 'lastClone'){
        carouselSlide.style.transition = "none";
        counter = carouselImage.length-3;
        posicion = inicial + size*(counter-1);
        carouselSlide.style.transform = 'translateX(' + (-posicion -70) + 'px)'; 
    }
    if (carouselImage[counter].id === 'firstClone'){
        carouselSlide.style.transition = "none";
        counter = 2;
        posicion = inicial + size*(counter-1);
        carouselSlide.style.transform = 'translateX(' + (-posicion -70) + 'px)';
    }
});
/**** COLORES ***/
:root {
  font-size: 16px;
  --celeste: #15B1BF;
  --rosado: #ED6780;
  --amarillo: #EEE868;
  --naranjo: #E84A15;
  --azul: #4D80C1;
  --blanco: #FFFFFF;
  --max-width: 1100px;
} 

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

body {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  line-height: 1.8;
  background: var(--blanco);
  color: var(--blanco);
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
}

img {
  width: 100%;
}

h1, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
  text-align: center;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-family: 'VCR OSD Mono', sans-serif;
  font-size: 2.5em;
  font-weight: 400;
}

h3 {
  font-size: 1.2em;
}

h4 {
  font-size: 1.25em;
}


/**** UTILITY ****/

.container {
  max-width: var(--max-width);
  margin: auto;
  padding: 0 2rem;
  overflow: hidden;
}

.btn {
  background: var(--amarillo);
  font-family: 'VCR OSD Mono', sans-serif;
  display: inline-block;
  text-align: center;
  color: var(--celeste);
  padding: 1rem 2rem 1rem 2rem;
  box-shadow: 3px 1px 5px rgba(0,0,0, 0.3);
}

.text-shadow-white {
  text-shadow: 2px 2px 0px rgba(255,255,255, 0.25);
}

.icon {
  height: 110px;
}


/**** TRABAJOS Y PROYECTOS ****/

#proyectos {
  background: url('../img/fondo.jpg') no-repeat center center/cover;
  height: 100vh;
  padding: 3em 4em 3em 4em;
}

#proyectos h2 {
  text-align: center;
  margin: 0 25% 5% 25%;
  padding: 0.4em 1em 0.4em 1em;
  border: 5px solid var(--celeste);
  background: rgba(0,0,0,0.5);
}

.carousel-container {

  width: 100%;
  margin: 80px auto 0 auto;
  overflow: hidden;
  position: relative;
}

.carousel-slide {
  display: flex;
  width: 100%;
  height: 310px;
}

.carousel-slide img {
  object-fit: cover;
  padding left: 70px;
  padding-right: 70px;
  max-width: 800px;
}

.icono {
  background: rgba(0,0,0,0.7);
  height: 3.8rem;
  width:  3.8rem;
  border: solid 0.18em var(--celeste);
  position: absolute;
  top: 50%;
  z-index: 10;
  display: grid;
  cursor: pointer;
}

.icono--right {
  right: 1%;
}

.icono--left {
  left: 1%;
}

.flecha {
  display: block;
  font-size: 2rem !important;
  margin: auto;
  color: var(--celeste);
  justify-content: center;
}
<!DOCTYPE html>

<html>
    <head>
        <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <title>Slider</title>
    </head>

    <body class="hola">

        <section id="proyectos">

            <div>
                <h2 class="text-shadow-white">
                    TRABAJOS Y PROYECTOS
                </h2>
            </div>

            <div class="carousel-container">

                <div class="icono icono--left" id="prevBtn">
                    <i class="fa fa-angle-left flecha" aria-hidden="true" ></i>
                </div>
                <div class="icono icono--right" id="nextBtn">
                    <i class="fa fa-angle-right flecha" aria-hidden="true" ></i>
                </div>
                
                <div class="carousel-slide">
                    <img src="./img/portafolio2/siguelagira1.jpg"> <!-- penultimo elemento -->
                    <img src="./img/portafolio2/mochasur1.jpg" id="lastClone"> <!-- ultimo elemento -->
                    <img src="./img/portafolio2/portasur1.jpg"> <!-- primer elemento -->
                    <img src="./img/portafolio2/portasur2.jpg"> <!-- segundo elemento -->
                    <img src="./img/portafolio2/portasur3.jpg">
                    <img src="./img/portafolio2/psr.jpg">
                    <img src="./img/portafolio2/siguelagira1.jpg"> <!-- penultimo elemento -->
                    <img src="./img/portafolio2/mochasur1.jpg"> <!-- ultimo elemento -->
                    <img src="./img/portafolio2/portasur1.jpg" id="firstClone"> <!-- primer elemento -->
                    <img src="./img/portafolio2/portasur2.jpg"> <!-- segundo elemento -->
                </div>

            </div>

        </section>

        <script src="app.js"></script>

    </body>

</html>

2
  • Edita la pregunta para agregar los estilos CSS que estás usando, probablemente solo necesitas crear un contenedor para cada imagen.
    – Triby
    Commented el 19 jun. 2020 a las 18:33
  • Hiciste más que solo modificar un poquito, tus imágenes se desplazan solo 70px cada vez. En cuanto tenga oportunidad veo qué puedo proponer.
    – Triby
    Commented el 20 jun. 2020 a las 20:21

1 respuesta 1

0

Como te había comentado, era necesario agregar un div para delimitar el contenido de cada elemento. Ahora puedes incluir textos, además de imágenes. Probablemente necesites crear otros contenedores internos para asignar márgenes si es que quieres llegar a hacerlo como en la imagen.

El funcionamiento es como en el video, pero simplificado para evitar duplicar código.

// Constantes
const carouselSlide = document.querySelector('.carousel-slide');
const carouselItem = document.querySelectorAll('.carousel-item');
const body = document.querySelector('.hola');

// Botones
const prevBtn = document.querySelector('#prevBtn');
const nextBtn = document.querySelector('#nextBtn');

// Contador y temporizador
let counter = 2;
let timer;

// Definir anchura máxima de elementos y ajuste para centrar
// Puede ser directamene en pixeles, ahora es 50%
const carouselSize = parseInt(carouselSlide.parentNode.offsetWidth * .5);
const carouselAdjust = parseInt((carouselSlide.parentNode.offsetWidth - carouselSize) / 2);
// Asignar ancho a todos los elementos
carouselItem.forEach(item => item.style.width = carouselSize + 'px' );


function carouselMove(op) {
    // Eliminar temporizador
    clearTimeout(timer);
    // Avanzar sin necesidad de parámetro
    if(!op) { op = 1; }
  // Actualizar contador si se proporcionó directamente un número diferente de anterior y siguiente
    if(op != -1 && op != 1) {
        counter = op;
    }
    // No mover si estamos en el límite
    if(counter == 1 || counter == carouselItem.length - 2) {
        return;
    }
    if(op == -1 || op == 1) {
        counter += op;
    }
    let posicion = (counter * carouselSize) - carouselAdjust;
    carouselSlide.style.transform = `translateX(-${posicion}px)`;
    // Crear transición, retrasada para asegurar que no se activa si hay regreso
    setTimeout(() => { carouselSlide.style.transition = "transform 0.5s ease-in-out" }, 400);
    // Iniciar movimiento automático
    timer = setTimeout(carouselMove, 5000);
}
// Activar botones
prevBtn.addEventListener('click', () => carouselMove(-1));
nextBtn.addEventListener('click', () => carouselMove());

// Escuchar límites
carouselSlide.addEventListener('transitionend', ()=>{
    if (carouselItem[counter].id === 'lastClone'){
        carouselSlide.style.transition = "none";
        carouselMove(carouselItem.length-3);
    }
    if (carouselItem[counter].id === 'firstClone'){
        carouselSlide.style.transition = "none";
        carouselMove(2);
    }
});

// Comenzar slider
carouselMove(2);
/**** COLORES ***/
:root {
  font-size: 16px;
  --celeste: #15B1BF;
  --rosado: #ED6780;
  --amarillo: #EEE868;
  --naranjo: #E84A15;
  --azul: #4D80C1;
  --blanco: #FFFFFF;
  --max-width: 1100px;
} 

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

body {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  line-height: 1.8;
  background: var(--blanco);
  color: var(--blanco);
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
}

img {
  width: 100%;
}

h1, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
  text-align: center;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-family: 'VCR OSD Mono', sans-serif;
  font-size: 2.5em;
  font-weight: 400;
}

h3 {
  font-size: 1.2em;
}

h4 {
  font-size: 1.25em;
}


/**** UTILITY ****/

.container {
  max-width: var(--max-width);
  margin: auto;
  padding: 0 2rem;
  overflow: hidden;
}

.btn {
  background: var(--amarillo);
  font-family: 'VCR OSD Mono', sans-serif;
  display: inline-block;
  text-align: center;
  color: var(--celeste);
  padding: 1rem 2rem 1rem 2rem;
  box-shadow: 3px 1px 5px rgba(0,0,0, 0.3);
}

.text-shadow-white {
  text-shadow: 2px 2px 0px rgba(255,255,255, 0.25);
}

.icon {
  height: 110px;
}


/**** TRABAJOS Y PROYECTOS ****/

#proyectos {
  background: url('../img/fondo.jpg') no-repeat center center/cover;
  height: 100vh;
  padding: 3em 4em 3em 4em;
}

#proyectos h2 {
  text-align: center;
  margin: 0 25% 5% 25%;
  padding: 0.4em 1em 0.4em 1em;
  border: 5px solid var(--celeste);
  background: rgba(0,0,0,0.5);
}

.carousel-container {
  width: 100%;
  margin: 80px auto 0 auto;
  overflow: hidden;
  position: relative;
}

.carousel-slide {
  display: inline-flex;
  height: 310px;
}
.carousel-item {
    height:100%;
}

.item1 { background:var(--celeste); }
.item2 { background:var(--rosado); }
.item3 { background:var(--amarillo); }
.item4 { background:var(--naranjo); }
.item5 { background:var(--azul); }

.carousel-item img {
  display:block;
  object-fit: cover;
  margin:0 auto;
  max-width: 800px;
}

.icono {
  background: rgba(0,0,0,0.7);
  height: 3.8rem;
  width:  3.8rem;
  border: solid 0.18em var(--celeste);
  position: absolute;
  top: 50%;
  transform:translateY(-50%);
  z-index: 10;
  display: grid;
  cursor: pointer;
}

.icono--right {
  right: 1%;
}

.icono--left {
  left: 1%;
}

.flecha {
  display: block;
  font-size: 2rem !important;
  margin: auto;
  color: var(--celeste);
  justify-content: center;
}
<!DOCTYPE html>
<html>
    <head>
        <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <title>Slider</title>
    </head>

    <body class="hola">

        <section id="proyectos">

            <div>
                <h2 class="text-shadow-white">
                    TRABAJOS Y PROYECTOS
                </h2>
            </div>

            <div class="carousel-container">

                <div class="icono icono--left" id="prevBtn">
                    <i class="fa fa-angle-left flecha" aria-hidden="true" ></i>
                </div>
                <div class="icono icono--right" id="nextBtn">
                    <i class="fa fa-angle-right flecha" aria-hidden="true" ></i>
                </div>
                
                <div class="carousel-slide">
                    <div class="carousel-item item4"><img src="./img/portafolio2/siguelagira1.jpg"></div> <!-- penultimo elemento -->
                    <div id="lastClone" class="carousel-item item5"><img src="./img/portafolio2/mochasur1.jpg"></div> <!-- ultimo elemento -->
                    <div class="carousel-item item1"><img src="./img/portafolio2/portasur1.jpg"></div> <!-- primer elemento -->
                    <div class="carousel-item item2"><img src="./img/portafolio2/portasur2.jpg"></div> <!-- segundo elemento -->
                    <div class="carousel-item item3"><p>Pudes incluir texto</p></div>
                    <div class="carousel-item item3"><img src="./img/portafolio2/portasur3.jpg"></div>
                    <div class="carousel-item item4"><img src="./img/portafolio2/psr.jpg"></div> <!-- penultimo elemento -->
                    <div class="carousel-item item5"><img src="./img/portafolio2/siguelagira1.jpg"></div> <!-- ultimo elemento -->
                    <div id="firstClone" class="carousel-item item1"><img src="./img/portafolio2/portasur1.jpg"></div> <!-- primer elemento -->
                    <div class="carousel-item item2"><img src="./img/portafolio2/portasur2.jpg"></div> <!-- segundo elemento -->
                </div>
            </div>
        </section>
    </body>
</html>

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.