Hola lo que pasa es que tengo este slider que es automático, avanza hacia la derecha solo, o a no ser que se le de click en siguiente, ahora le necesito agregar dots para decirle a que imagen se dirija, logre acomodar los dots en el slider, necesito la ayuda de alguien que me diga como agregar los dots a las imágenes correspondientes.
Por decir el primer dot me lleve a la img 0, el segundo a la img1 y asi sucesivamente. Manejo las imagenes con widht:(si tengo 2 seria 200%, si son 4 400% y asi sucesivamente)
En el javascript utilizo insertAdjacentElement para que el ultimo div se mueva al primero y asi sucesivamente.
Espero su ayuda gracias.
<!DOCTYPE html>
<html lang="es">
<head>
<title>SLIDER </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,user-scalable=no initial-scale=1 maximum-scale=1, minimum-scale=1">
<link rel="stylesheet" href="slider.css">
</head>
<body>
<div class="container-slider">
<div class="slider" id="slider" >
<div class="slider__section">
<img src="Imagenes/img0.png.jpg" alt="" class="slider__img" id="img-1">
</div>
<div class="slider__section">
<img src="Imagenes/img1.png" alt="" class="slider__img" id="img-2">
</div>
<div class="slider__section">
<img src="Imagenes/img2.png" alt="" class="slider__img" id="img-3">
</div>
<div class="slider__section">
<img src="Imagenes/Web-en-construccion.jpg" alt="" class="slider__img" id="img-4">
</div>
</div>
<div class="slider__btn slider__btn--right" id="btn-r">></div>
<div class="slider__btn slider__btn--left" id="btn-l"><</div>
<ol class="nav-dots">
<li class="nav-dot" id="img-dot-1"></li>
<li class="nav-dot" id="img-dot-2"></li>
<li class="nav-dot" id="img-dot-3"></li>
<li class="nav-dot" id="img-dot-4"></li>
</ol>
</div>
<script src="slider.js"></script>
</body>
</html>
CSS
*{
box-sizing: border-box;
}
body{
display: flex;
min-height: 100vh;
background: rgb(65, 64, 64);
}
.container-slider{
text-align: center;
width: 90%;
max-width: 900px;
margin: auto;
overflow: hidden;
box-shadow: 0 0 0 10px rgb(255, 0, 0),
0 15px 50px;
position: relative;
}
.slider{
display: flex;
/*Cambiar si se tienen que agregar mas imagenes*/
width: 400%;
height: 400px;
margin-left: -100%;
}
.slider__section{
width: 100%;
}
.slider__img{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.slider__btn{
position: absolute;
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.7);
top: 50%;
transform: translateY(-50%);
font-size: 30px;
font-weight: bold;
font-family: monospace;
text-align: center;
border-radius: 50%;
cursor: pointer;
}
.slider__btn:hover{
background: #fff;
}
.slider__btn--left{
left: 10px;
}
.slider__btn--right{
right: 10px ;
}
.nav-dots {
width: 100%;
bottom: 9px;
height: 11px;
display: block;
position: absolute;
text-align: center;
}
.nav-dots .nav-dot {
top: -5px;
width: 20px;
height: 20px;
margin: 0 4px;
position: relative;
border-radius: 100%;
display: inline-block;
background-color: rgba(0, 0, 0, 0.6);
}
.nav-dots .nav-dot:hover {
cursor: pointer;
background-color: rgba(255, 0, 0, 0.8);
}
JS
const slider = document.querySelector("#slider");
let sliderSection = document.querySelectorAll(".slider__section");
let sliderSectionLast = sliderSection[sliderSection.length -1];
const btnl = document.querySelector("#btn-l");
const btnr = document.querySelector("#btn-r");
slider.insertAdjacentElement('afterbegin', sliderSectionLast);
function Next(){
let sliderSectionFirst = document.querySelectorAll(".slider__section")[0];
slider.style.marginLeft = "-200%";
slider.style.transition = "all 0.5s";
setTimeout(function(){
slider.style.transition = "none";
slider.insertAdjacentElement('beforeend', sliderSectionFirst);
slider.style.marginLeft = "-100%";
},500);
}
function Prev(){
let sliderSection = document.querySelectorAll(".slider__section");
let sliderSectionLast = sliderSection[sliderSection.length -1];
slider.style.marginLeft = "0%";
slider.style.transition = "all 0.5s";
setTimeout(function(){
slider.style.transition = "none";
slider.insertAdjacentElement('afterbegin', sliderSectionLast);
slider.style.marginLeft = "-100%";
},500);
}
btnr.addEventListener('click', function(){
Next();
});
btnl.addEventListener('click', function(){
Prev();
});
setInterval(function(){
Next();
}, 5000);