How do I place next / prev buttons and dots controls in my slideshow with css / javascript?

Question

How do I place next / prev buttons and dots controls in my slideshow with css / javascript?

Navigation

#1 by (0 votes)

0

Hello, I'm going through a lot of difficulties to make my slideshow, the best I got was an automatic slideshow, but I'd like to include prev / next arrows to control and buttons underneath as well, can anyone 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;

javascript html5 css3 carousel slideshow

asked by anonymous 09.08.2018 / 19:11

1 answer

Edge in a TEdit How to return a pdf in Web Api C # without doing dowload and open in Browser?

score 0 · Answer 1

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