1

Quiero tener un slider que contenga x número de imágenes o diapositivas. Bien, si el slider contiene 3-4 elementos es cómodo de realizar, ¿pero y si contiene 40?

¿Cómo podría agrupar los elementos imagen para hacerlo más sencillo? El texto de las imágenes sería "1.jpg", "2.jpg", "x.jpg" para hacerlo más cómodo en la búsqueda y en el posible for o while que tengamos que programar. ¿Se podría programar en Javascript haciendo referencia al id de img?

Código:

var myIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("mySlides");
  for (i = 0; i < x.length; i++) {
	x[i].style.display = "none";  
  }
  myIndex++;
  if (myIndex > x.length) {myIndex = 1}    
  x[myIndex-1].style.display = "block";  
  setTimeout(carousel, 1500); // Change image every 2 seconds
}
.mySlides { display: none; }
		
#centrar
{
	position: fixed;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
<div class="w3-content w3-section" id="centrar">
	<img class="mySlides" src="1.jpg">
	<img class="mySlides" src="2.jpg">
	<img class="mySlides" src="3.jpg">
	<img class="mySlides" src="4.jpg">
	<img class="mySlides" src="5.jpg">
	<img class="mySlides" src="6.jpg">
	<img class="mySlides" src="7.jpg">
	<img class="mySlides" src="8.jpg">
	<img class="mySlides" src="9.jpg">
	<img class="mySlides" src="10.jpg">
	<img class="mySlides" src="11.jpg">
	<img class="mySlides" src="12.jpg">
</div>

3
  • Pues puedes hacer la cadena tú, la que vas a meter en el html, con js, entonces digamos en un for tener un la cadena cadena += "<img class='mySlides' src='"+ i + ".jpg'"> algo así, según lo que entiendo, dime y te lo planteo como respuesta con un ejemplo mejor
    – DaxTter77
    Commented el 9 oct. 2019 a las 13:32
  • Sí, tenía pensado hacerlo con Javascript, tener solo un <img src> en el <di> que englobe las imágenes y hacer referencia a él mediante DOM en Javascript. ¿Cómo lo ves?
    – omaza1990
    Commented el 9 oct. 2019 a las 13:38
  • Pues podrías intentarlo y mirar a ver que cosas no te dan y agregarlo a la pregunta, porque siento que hay algo que no puede cuadrar, pero no sabría hasta verlo, intenta hacerlo y sí te quedas estancado lo agregas y me comentas
    – DaxTter77
    Commented el 9 oct. 2019 a las 13:47

2 respuestas 2

2

Podrías crear una función, que definiendo una serie de parámetros, te genere dinamicamente un carrusel. De esta manera podrías usarla para diferentes casos.

Se me ha ocurrido identificar el número de diapositivas que tiene el carrusel, la ruta de la imagen (una misma ruta y el mismo nombre de imagen con un número incremental para diferenciarlas), el ID del elemento al que deseamos insertar las imágenes y la extensión que tienen las imágenes. Podrías parametrizar más cosas pero con estas 4 tienes un buen punto de partida.

window.onload = function() { 
  myIndex = 0; 
  generar_slider ('centrar', 20, 'gatitos', 'jpg', 'mySlides');
};

function carousel() {
  var i;
  var x = document.getElementsByClassName('mySlides');
  
  for (i = 0; i < x.length; i++) {
	  x[i].style.display = "none";  
  }
  
  myIndex++;
  
  if (myIndex > x.length) {
    myIndex = 1
  }    
  
  x[myIndex-1].style.display = "block";  
  setTimeout(carousel, 1500); // Change image every 2 seconds
}

function generar_slider (id_slider, numero_diapositivas, ruta_imagen, extension_imagen, clase) {
  //Se captura el elemento que contendrá el carrusel mediante el "id_slider" pasado a la función
  let carrusel = document.getElementById(id_slider);

  //Se realiza un bucle que itera tantas veces como número de imágenes necesitemos.
  //El número se obtiene del parámetro de entrada "numero_diapositivas"
  for (var i= 1; i <= numero_diapositivas; i++) {
    //Se crea y almacena un elemento <img>
    let imagen = document.createElement("img");
    //Se le añade la ruta de la imagen que se visualizará.
    //La ruta se obtiene de la concatenación de los parámetros de entrada "ruta_imagen"
    //(la ruta comprende las carpetas si las hubiera más la imagen) con la extensión de la imagen y
    //separados por un punto.
    imagen.src = ruta_imagen + i + '.' + extension_imagen;
    //Se le añade a la imagen la clase pasada como parámetro de entrada (en nuestro caso "mySlides")
    imagen.classList.add(clase);
    //Se cuelga la imagen en el DOM, concretamente en el contenedor que contiene el carrusel.
    carrusel.appendChild(imagen);
  }
  
  //En esta parte ya se han cargado en el DOM todas las imágenes por lo que entonces llamamos
  //a la función "carousel()" para que las mueva.
  carousel();
}
.mySlides { display: none; }
		
#centrar {
	position: fixed;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
<div class="w3-content w3-section" id="centrar">
	
</div>

EDIT

La manera en la que lo plantee en un principio daba lugar a que la función carousel() se llamara antes de que las imágenes se cargaran en el DOM por lo que tuve que modificar la función generar_slider para que en cada iteración del bucle inserte la imagen en vez de insertarlas todas de golpe al final de la función.

7
  • Se podría también pasar a la función un array con las rutas de las imágenes a insertar, así no tendrías ni que tener en cuenta el nombre, la extensión y el número de imágenes, tan solo recorrerlo e ir creando dinamicamente las imágenes.
    – phpMyGuel
    Commented el 9 oct. 2019 a las 14:43
  • En mi caso, todas las imágenes están el mismo directorio/carpeta: podrían llamarse "imagenX.jpg". ¿Entonces de qué forma sería para agrugarlas y no escribir tantas líneas de <img src> como elementos tenga el carrusel?
    – omaza1990
    Commented el 9 oct. 2019 a las 15:07
  • La función que he puesto resolvería ese problema. ¿Qué es lo que no comprendes de ella?
    – phpMyGuel
    Commented el 9 oct. 2019 a las 15:11
  • Integrar esa función en mi código trastocaría todo. No me gustaría cambiar la "estructura de mi código" (salvo reemplazar la línea <img src>)
    – omaza1990
    Commented el 9 oct. 2019 a las 15:14
  • Actualicé mi respuesta para que la veas integrada con tu código y sin que el código que aportas quede apenas modificado.
    – phpMyGuel
    Commented el 9 oct. 2019 a las 16:06
1

Se podría crear el elemento <img> dinámicamente usando la clase Image():

for (let i = 0; i <= 40; i++) {

  const img = new Image();
  img.src = "https://i.sstatic.net/rLuNu.jpg?s=48&g=1";
  img.id = "i" + i;
  document.body.append(img);

}

const imagen3 = document.getElementById("i3");

console.log(imagen3)

la ventaja sería que por un lado la clase Image() tiene el evento .onload() y por otro, que si no haces el .append() sirve para precargar las imágenes.

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.