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>
for
tener un la cadenacadena += "<img class='mySlides' src='"+ i + ".jpg'">
algo así, según lo que entiendo, dime y te lo planteo como respuesta con un ejemplo mejor