eu gostaria de uns dots abaixo do slideshow para quando clicar no primeiro dot o slider vai direto pro primeiro slide, mas não estou conseguindo, alguem pode me ajudar?
HTML:
<html lang="pt-br">
<head>
<meta charset="UTF-8"/>
<title> titulo </title>
<link rel="stylesheet" type="text/css" href="_css/estilo.css"/>
<script language="javascript" src="_javascript/funcoes.js"> </script>
</head>
<section id="corpo">
<body>
<div class="slideshow-container">
<img name="slide" style="width:100%"/>
<a class="prev" onClick="prevImg()">❮</a>
<a class="next" onClick="nextImg()">❯</a>
</div>
<br/>
</section>
</body>
</html>
CSS3:
*{box-sizing: border-box}
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/*prev/next controls */
.prev, .next {
cursor: pointer;
position: absolute;
top: 250px;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, next:hover {
background-color: rgba(0,0,0,.8);
}
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);
}
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--)%3];
if (i<=images.length) return true; //fim da lista
return false;
}
window.onload = () => {
let time = 3000;
let id_interval = setInterval(() => {
if(nextImg()) {
clearInterval(id_interval);
}
}, time);
}