How do I put next / prev buttons and dots controls in my slideshow with css / javascript?
Hello, I am going through a lot of difficulties to make my slideshow, the best I could do was an automatic slideshow, only I would like to include prev/next arrows to control and buttons underneath too, 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;
0
Author: Gustavo Lima, 2018-08-09
1 answers
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);
}
0
Author: thxmxx, 2018-08-09 19:44:45