How do I put next/Prev Buttons and Dots Controls on my css/javascript slideshow?

Asked

Viewed 328 times

0

Hello, I’m going through a lot of difficulties to make my slideshow, the best I got was an automatic slideshow, only I’d like to include Prev/next arrows to control and buttons below too, someone can help me?

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 answer

0

I made an example for you, based on your code.

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);
}
  • Thanks man, it helped a lot, only now the reset timer when I click the arrow, but I help very much even fought!

  • I added the modification for you. The plunker is also updated

Browser other questions tagged

You are not signed in. Login or sign up in order to post.