Minha solução utilizando um carrossel simples

No html incluí todas as imagens e um botão:

      <section class="robotron">
        <img
        class="robo robo-ativo"
        src="img/Robotron1.png"
        alt="Robotron"
        id="robotron1"
        data-robotron
      />
        <img
          class="robo"
          src="img/Robotron2.png"
          alt="Robotron"
          id="robotron2"
          data-robotron
        />
        <img
          class="robo"
          src="img/Robotron3.png"
          alt="Robotron"
          id="robotron3"
          data-robotron
        />
        <img
          class="robo"
          src="img/Robotron4.png"
          alt="Robotron"
          id="robotron4"
          data-robotron
        />
        <img
          class="robo"
          src="img/Robotron5.png"
          alt="Robotron"
          id="robotron5"
          data-robotron
        />
        <img
          class="robo"
          src="img/Robotron6.png"
          alt="Robotron"
          id="robotron6"
          data-robotron
        />
        <img
          class="robo"
          src="img/Robotron7.png"
          alt="Robotron"
          id="robotron7"
          data-robotron
        />
        <figcaption class="titulo">ROBOTRON <br />2000</figcaption>
      </section>

      <div class="peca controle-botao-cor">
        <div class="controle ">
          <buttom class="controle-ajuste" id="prev"><</buttom>
          <input
            type="text"
            class="controle-contador controle-cor"
            placeholder="Cor"
            data-contador
          />
          <buttom class="controle-ajuste" id="next">></buttom>
        </div>
      </div>

No CSS incluí um display none e uma classe com display block para as imagens, além de posicionar o botão

.robo {
    height: 110%;
    z-index: 1;
    position: absolute;
    left: -20%;
    top: -5%;
    display: none;
}

.robo-ativo {
    display: block
}

.controle-botao-cor {
    position: relative;
    z-index: 10;
}

No JS fiz um carrossel simples que, conforme a seleção da imagem, adiciona ou remove a classe com display block.

const prev = document.getElementById('prev');
const next = document.getElementById('next');
const imagens = document.querySelectorAll('[data-robotron]');
let indexAtivo = -1

imagens.forEach ((item, index) => {
    if(item.classList.contains('robo-ativo')) {
        indexAtivo = index;
    }
})

prev.addEventListener('click', () => {
    const prevIndex = indexAtivo - 1;
    if (imagens[prevIndex]) {
        imagens[indexAtivo].classList.remove('robo-ativo');
        imagens[prevIndex].classList.add('robo-ativo');
        indexAtivo = prevIndex
    } else {
        imagens[indexAtivo].classList.remove('robo-ativo');
        imagens[imagens.length - 1].classList.add('robo-ativo');
        indexAtivo = imagens.length - 1;
    }
})

next.addEventListener ('click', () => {
    const nextIndex = indexAtivo + 1;
    if (imagens[nextIndex]) {
        imagens[indexAtivo].classList.remove('robo-ativo');
        imagens[nextIndex].classList.add('robo-ativo');
        indexAtivo = nextIndex;
    } else {
        imagens[indexAtivo].classList.remove('robo-ativo');
        imagens[0].classList.add('robo-ativo');
        indexAtivo = 0;
    }
})