0

Estoy tratando de hacer un slider propio, obviamente, es un slider del cual reconozco sus problemas al tener demasiado peso en la página etc (bienvenidas son las sugerencias de cómo mejorarlo, consejos etc).

Me he atascado en dos sitios a la vez:

  1. Insertando la imagen correspondiente en el div correspondiente.
  2. Al hacer el bucle.

La imagen he intentado insertarla haciendo que el textContent del div fuera igual a la imagen [0] (ya que las tengo en un array), pero siempre tengo el resultado de que se inserta [object HTMLImageElement].

Por otro lado, para aumentar o reducir el valor de i, ideé un sistema que creo que se podría optimizar bastante.

Dejo aquí el código verificable:

window.addEventListener('load', ()=>{
    let lng = getElements();
    let dvc = getDivCntnt();
    let nxt = getNxtBtn();
    let prv = getPrvBtn();

    letStart(lng, dvc, nxt, prv);
});

function getElements(){
    let imgf = document.querySelector('.img-files');
    let lng = imgf.querySelectorAll('img');

    return lng
}
function getDivCntnt(){
    return document.querySelector('.img-content');
}

function getNxtBtn(){
    return document.querySelector('.next');
}

function getPrvBtn(){
    return document.querySelector('.previous');
}

function letStart(lng, dvc, nxt, prv){
    var i = 0;

    if(nxt.addEventListener('click', ()=>{
        i++;
        console.log(i);
        if(i == lng.length){
            i = 0;
            console.log(i);
        }
    }));

    if(prv.addEventListener('click', ()=>{
        i--;
        console.log(i);
        if(i == -1){
            i = 2;
            console.log(i);
        }
    }));
}
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <title>012 : slider</title>
    <script src="js/012.js"></script>
</head>
<body>
<div class="content">

    <div class="img-content">
    </div>
    <button class="previous"> PREVIOUS </button>
    <button class="next">NEXT</button>

</div>

<div class="img-files" style="display: none">
    <img src="img/012.1.png">
    <img src="img/012.2.png">
    <img src="img/012.3.png">
</div>
</body>
</html>

1 respuesta 1

2

El estilo que muestra/oculta las imágenes tiene que estar en los elementos <img>, no en el <div>, así puedes controlarlas individualmente.

Luego, en los bucles, cuando ya tienes el índice que deseas, tienes que ocultar todas las imágenes, y mostrar la que deseas.

window.addEventListener('load', () => {
    let lng = getElements();
    let dvc = getDivCntnt();
    let nxt = getNxtBtn();
    let prv = getPrvBtn();

    letStart(lng, dvc, nxt, prv);
});

function getElements(){
    let imgf = document.querySelector('.img-files');
    let lng = imgf.querySelectorAll('img');

    return lng
}
function getDivCntnt(){
    return document.querySelector('.img-content');
}

function getNxtBtn(){
    return document.querySelector('.next');
}

function getPrvBtn(){
    return document.querySelector('.previous');
}

function showGiven(lng, index) {
    // Ocultar todas las imagenes.
    lng.forEach(img => img.style.display = 'none');
    
    // Mostrar la que toca.
    lng[index].style.display = 'block';
}

function letStart(lng, dvc, nxt, prv){
    var i = 0;

    if(nxt.addEventListener('click', ()=>{
        i++;
        if(i == lng.length){
            i = 0;
        }
        showGiven(lng, i);
    }));

    if(prv.addEventListener('click', ()=>{
        i--;
        if(i == -1){
            i = lng.length - 1;
        }
        showGiven(lng, i);
    }));
}
<!DOCTYPE html>
<html>
  <body>
    <div class="content">
      <div class="img-content"></div>
      <button class="previous"> PREVIOUS </button>
      <button class="next">NEXT</button>
    </div>

    <div class="img-files">
      <img src="https://cdn.sstatic.net/Sites/es/Img/favicon.ico" style="display: none">
      <img src="https://cdn.sstatic.net/Sites/esmeta/Img/favicon.ico" style="display: none">
      <img src="https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico" style="display: none">
    </div>
  </body>
</html>

Te sugiero usar una clase CSS en lugar de editar los estilos directamente. Puede ser una clase para mostrar la imagen, y la pones y la quitas cada vez.

En el bucle del i-- le he puesto que si es i == -1, ponga i = lgn.length - 1 en lugar del 2, para que funcione con más elementos también.

1
  • OH QUE MARAVILLA!!! Ahora mismito estudio el código :3
    – AQMR
    el 24 mar. 2021 a las 11:43

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.