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

Question

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

Asked 6 years, 2 months ago

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;

Of a look at How to js slideshow - w3schools.com if you need more ideas

– Mark Vaaz

2018/08/09 at 17:52

1 answer

Browser other questions tagged javascript html5 css3 carousel slideshow

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

by thxmxx • **530** points · Answer 1 · 2018-08-09T17:36:56+00:00

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);
}