próxima image

Imagine que as fotos estão dentro de um container com barra de rolagem oculta

e ao clicar em prev/next o container será movido Xpx pra esquerda ou para a direita.

segue sugestão:

<div class="slider">
 <div class="images-container">
 <figure class='active'><img src="https://picsum.photos/400/300?random=1" /></figure>
 <figure><img src="https://picsum.photos/400/300?random=2" /></figure>
 <figure><img src="https://picsum.photos/400/300?random=3" /></figure>
 <figure><img src="https://picsum.photos/400/300?random=4" /></figure>
 <figure><img src="https://picsum.photos/400/300?random=5" /></figure>
 </div>
 <div class="controllers">
 <button id='prev'>&#10094;</button>
 <button id='next'>&#10095;</button>
 </div>
</div>
<div class="log">
 <p></p>
</div>

* {

 box-sizing: border-box;
}

.slider {
 overflow-x: hidden;
 position: relative;
}

 display: flex;
 position: relative;
 width: 100%;
 transition: all 0.2s ease;
}

.slider figure {

 display: flex;
 margin: 0;
 min-width: 100%;
 justify-content: center;
}

.slider .controllers {

 position: absolute;
 top: 50%;
 width: 100%;
 display: flex;
 justify-content: space-between;
 transform: translateY(-50%);
}

.log {
 display: flex;
}

 font-family: monospace;
 white-space: pre;
 margin: 12px;
 padding: 12px;
 border-left: thin solid #eee;
}

	 

const log = document.querySelector("div.log");
const slider = document.querySelector("div.slider");
const imagesContainer = slider.querySelector(".images-container");
const figuresCollection = [...imagesContainer.children];
let activeFigure;
let activeIndex;
let figureWidth;

const setImagesContainerPosition = () => {
 console.log("activeIndex :>> ", activeIndex);
 imagesContainer.style.transform = `translateX(-${
 activeIndex * activeFigure.offsetWidth
 }px)`;
};

const moveSlider = (direction) => {
 // select active figure
 activeFigure = slider.querySelector("figure.active");

 // detect index of active figure
 const prevIndex = figuresCollection.indexOf(activeFigure);

 activeIndex =
 (direction === "right"
 ? prevIndex + 1
 : prevIndex - 1 + figuresCollection.length) % figuresCollection.length;

 setImagesContainerPosition();

 // remove active from
 activeFigure.classList.remove("active");
 figuresCollection[activeIndex].classList.add("active");

 log.querySelector("p").innerHTML = JSON.stringify(
 { prevIndex, activeIndex },
 null,
 2
 );
};

next.onclick = () => {
 moveSlider("right");
};
prev.onclick = () => {
 moveSlider("left");
};

window.onresize = setImagesContainerPosition;

	veja exemplo rodando aqui:

>

14 horas atrás, washalbano disse:

Imagine que as fotos estão dentro de um container com barra de rolagem oculta

e ao clicar em prev/next o container será movido Xpx pra esquerda ou para a direita.

segue sugestão:

<div class="slider">
 <div class="images-container">
 <figure class='active'><img src="https://picsum.photos/400/300?random=1" /></figure>
 <figure><img src="https://picsum.photos/400/300?random=2" /></figure>
 <figure><img src="https://picsum.photos/400/300?random=3" /></figure>
 <figure><img src="https://picsum.photos/400/300?random=4" /></figure>
 <figure><img src="https://picsum.photos/400/300?random=5" /></figure>
 </div>
 <div class="controllers">
 <button id='prev'>&#10094;</button>
 <button id='next'>&#10095;</button>
 </div>
</div>
<div class="log">
 <p></p>
</div>

* {

 box-sizing: border-box;
}

.slider {
 overflow-x: hidden;
 position: relative;
}

 display: flex;
 position: relative;
 width: 100%;
 transition: all 0.2s ease;
}

.slider figure {

 display: flex;
 margin: 0;
 min-width: 100%;
 justify-content: center;
}

.slider .controllers {

 position: absolute;
 top: 50%;
 width: 100%;
 display: flex;
 justify-content: space-between;
 transform: translateY(-50%);
}

.log {
 display: flex;
}

 font-family: monospace;
 white-space: pre;
 margin: 12px;
 padding: 12px;
 border-left: thin solid #eee;
}

  

const log = document.querySelector("div.log");
const slider = document.querySelector("div.slider");
const imagesContainer = slider.querySelector(".images-container");
const figuresCollection = [...imagesContainer.children];
let activeFigure;
let activeIndex;
let figureWidth;

const setImagesContainerPosition = () => {
 console.log("activeIndex :>> ", activeIndex);
 imagesContainer.style.transform = `translateX(-${
 activeIndex * activeFigure.offsetWidth
 }px)`;
};

const moveSlider = (direction) => {
 // select active figure
 activeFigure = slider.querySelector("figure.active");

 // detect index of active figure
 const prevIndex = figuresCollection.indexOf(activeFigure);

 activeIndex =
 (direction === "right"
 ? prevIndex + 1
 : prevIndex - 1 + figuresCollection.length) % figuresCollection.length;

 setImagesContainerPosition();

 // remove active from
 activeFigure.classList.remove("active");
 figuresCollection[activeIndex].classList.add("active");

 log.querySelector("p").innerHTML = JSON.stringify(
 { prevIndex, activeIndex },
 null,
 2
 );
};

next.onclick = () => {
 moveSlider("right");
};
prev.onclick = () => {
 moveSlider("left");
};

window.onresize = setImagesContainerPosition;

 veja exemplo rodando aqui:

washalbano, você fez o trabalho completo e funcionou muito bem, obrigado, mas o que quero saber é que código uso para dar um click na seta e ir para image2, depois dar outro click na seta e ir para image3, usando código javascript moda antiga com base no código que postei. 

.