próxima image

[Biel. 9]

Olá pessoal. O link abaixo tem três image e de inicio aparece image1. Quero fazer o seguinte: dar um click na seta e ir para image2, depois dar outro click na seta e ir para image3 . Somente isso . Obrigado!

.

acessa jsbin

[washalbano 54]

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;
}
.slider .images-container {
  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;
}
.log > p {
  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:
https://codepen.io/washalbano/pen/ExrKGYZ

[Biel. 9]

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;
}
.slider .images-container {
  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;
}
.log > p {
  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:
https://codepen.io/washalbano/pen/ExrKGYZ

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. 

[Biel. 9]

.