Me guié por un video de youtube (https://www.youtube.com/watch?v=KcdBOoK3Pfw). Lo modifiqué un poquito para que quedara así:
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>