0

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">&#62;</div>
     <div class="slider__btn slider__btn--left" id="btn-l">&#60;</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);
4
  • ¿Que has intentado?
    – davidbug
    Commented el 28 may. 2021 a las 15:18
  • Antes de usar puntos para ir a determinada imagen, deberías tener la posibilidad de cancelar el temporizador cada que se haga un clic, ya sea en los puntos o en avanzar / retroceder, para que el comportamiento no sea errático. Puedes revisar el funcionamiento de este otro para ver de lo que hablo. Ya que hayas corregido esa parte, entonces sí agregas la funcionalidad de los puntos.
    – Triby
    Commented el 28 may. 2021 a las 17:26
  • he intentado con un evento hacia los dots que me mandara directo hacia la imagen correspondiente pero no funciona, realice lo mismo pero cambiando el width por el correspondiente pero tampoco.
    – Victor A
    Commented el 28 may. 2021 a las 17:26
  • Por cierto, tu código sin sangría (identado) es muy difícil de interpretar.
    – Triby
    Commented el 28 may. 2021 a las 17:27

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.