0

Olá, eu estou passando muitas dificuldades para fazer o meu slideshow, o melhor que consegui foi um slideshow automatico, só que eu gostaria de incluir setas prev/next para controlar e botões embaixo também, alguem pode me ajudar?

HTML:

 <div class="slideshow-container">
    <img name="slide" style="width:100%"/>
    </div>
    <br/>

CSS:

 *{box-sizing: border-box}

 .slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
  }

JS:

var i = 0;
var images = [];
var time = 3000;

images[0] = 'imagens/img1.jpg';
images[1] = 'imagens/img2.jpg';
images[2] = 'imagens/img3.png';

function changeImg(){
document.slide.src = images[i];

if(i < images.length - 1){
    i++;
}else {
    i = 0;
}

setTimeout("changeImg()", time);
}

window.onload = changeImg;
1

1 Resposta 1

1

Fiz um exemplo pra você, baseado no seu código.

Plunkr

index.html

  <head>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="slideshow-container">
      <img name="slide" style="width:100%"/>
    </div>
    <button onClick="prevImg()">Anterior</button>
    <button onClick="nextImg()">Próxima</button>
    <br/>
  </body>

</html>

script.js

var i = -1;
var images = ['http://worldartsme.com/images/angry-birds-clipart-1.jpg',
          'https://marketingdeconteudo.com/wp-content/uploads/2017/01/formatos-de-imagem.jpg',
          'https://marketingdeconteudo.com/wp-content/uploads/2017/01/formatos-de-imagem-3.jpg'];

function nextImg(){
  document.slide.src = images[(++i)%3];
  if (i>=images.length) return true; //fim da lista
  return false;
}

function prevImg(){
  document.slide.src = images[(i = i<=0 ? 0 : i-1)%3];
}

window.onload = () => {
  let time = 3000;
  let id_interval = setInterval(() => {
    if(nextImg()) {
      clearInterval(id_interval);
    }
  }, time);
}
2
  • obrigado cara, ajudou muito, só falta agora o timer resetar quando eu clico na seta, mas ajudo muito brigado mesmo! 9/08/2018 às 18:38
  • Adicionei a modificação pra você. No plunker também está atualizado
    – thxmxx
    9/08/2018 às 19:45

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .