Vamos con un ejemplo de creación de un Slideshow muy simple en jQuery. Lo primero de todo es generarnos la estructura del proyecto, cada uno que la haga como quiera, yo tengo algo así
En mi caso voy a usar bootstrap, por comodidad, pero no es necesario, lo añado al index.html al igual que jQuery. También he creado mi propio fichero de estilo style.css y lo he añadido, quedando todo de esta manera:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ninja_slider</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
</body>
</html>
Lo siguiente es añadir donde estará el slider en el body de la página
<body>
<div class="container" align="center">
<h1>Ninja-Slider</h1>
<hr>
<div class="ninjaSlider"></div>
</div>
</body>
Nuestro slider como os podéis imaginar estará en el div con la clase ninjaSlider, y esto es todo por el momento en el html, ahora vamos a nuestro css para darle un poco de estilo y que se vea algo en la página. Le daremos un tamaño y un color de fondo para ir viendo algo.
.ninjaSlider{
background-color: blue;
width: 600px;
height: 300px;
overflow: hidden;
margin-bottom: 10px;
}
Quedando así
Bien ahora vamos a crear un fichero js donde meteremos toda la lógica de funcionamiento de nuestro slider. Tener en cuenta que la idea es hacerlo estilo plugin, es decir que este encapsulado para poder usarlo en cualquiera de nuestros proyectos.
Bien lo primero como hemos comentado es crearnos el fichero js y meterlo en la carpeta correspondiente, lo siguiente son las imágenes para que slider tenga algo que mostrar, entonces buscamos unas cuantas imágenes, yo me he descargado 4 y las metemos en la carpeta img.
Una vez que tenemos las imagenes ya podemos empezar, con el js. Creamos una función anónima que se ejecute nada más cargar el js en el HTML:
(function(){
//Aqui dentro meteríamos todo el código.
})();
Vamos a empezar por algo sencillo, que es recibir las imagenes desde el html que es desde donde nos las mandarían si pensamos que este es un plugin. Estas imágenes las incluiremos en una lista, es decir, dentro de un ul de html.
Pero antes de hacer esto, pensemos...¿cómo hacemos para pasar los datos que necesitemos a nuestro plugin?, fácil, por parámetros le pasamos un objecto que tenga las modificaciones que queramos hacer.
Primero creemos un método, que será el que realmente configure e inicie nuestro slider
(function(){
$.ninjaShow = function(config){
}
})();
Aqui hemos añadido la función ninjaShow a jQuery, por lo que la podemos llamar desde cualquier sitio desde el que podamos llamar a jQuery. A esta función le pasamos por parámetro un objeto config que tendrá todos los cambios sobre la configuración por defecto que establezcamos.
Continuemos añadiendo lógica para nuestras imagenes, suponiendo que nos indiquen cuales son las imágenes a través del objeto config, podemos tener nuestras imagenes bajo la propiedad images dentro del objeto config. Hagamos una prueba para que veáis de lo que estoy hablando, nos vamos a nuestro index.html y añadimos lo siguiente al final (pero siempre dentro del body)
<!-- añadimos nuestro js al html -->
<script src="js/slider.js"></script>
<script>
//Llamamos a nuestra función pasandole un objeto con la propiedad images
$.ninjaShow({
images:['img/ninja1.jpg','img/ninja2.jpg','img/ninja3.jpg','img/ninja4.jpg'],
});
</script>
</body>
Y luego en nuestro fichero js, ponemos un log para ver que estamos recibiendo.
(function(){
$.ninjaShow = function( config ){
console.log(config);
}
})();
Si guardamos y miramos la consola al ejecutar nuestro index.html, veremos algo como lo siguiente
Es decir, un objeto con la propiedad images y dentro de esta un array con la dirección donde estan nuestras imágenes.
Entonces ya tenemos nuestras imágenes, ahora creemos la lista con ellas.
(function(){
$.ninjaShow = function( config ){
//Comprobamos que nos pasan alguna imagen
if (config.images.length == 0){
alert("Necesitamos alguna imagen para mostrar");
return;
}
//Abrimos la lista
var imgList = "<ul>";
//Recorremos el array y vamos añadiendo lineas con nuestra imagen como source
config.images.map((img)=>{
imgList += '<li><img src="'+ img +'"</li>';
})
//Cerramos la lista
imgList += "</ul>";
//Adjuntamos la lista al contenedor
$(".ninjaSlider").append(imgList);
}
})();
Si ejecutamos nuestro index.html veremos algo similar a esto:
Ahora mismo no vemos casi nada, ¿verdad?, vamos a modificar un poco el estilo para que veamos que realmente las cosas estan donde deben estar. Nos vamos a nuestro style.css y lo dejamos así
.ninjaSlider{
background-color: blue;
width: 600px;
height: 300px;
/* overflow: hidden; */
margin-bottom: 10px;
}
.ninjaSlider ul{
padding: 0;
list-style-type: none;
margin-left: 0px;
display: flex;
}
Ahora si veríamos algo aunque solo sean las imágenes
Pero si miramos el código fuente de la página deberíamos ver algo como esto:
Ya tenemos nuestra lista de imágenes, y las vemos porque hemos cambiado la propiedad overflow de css, la configuración correcta sería descomentado la línea y dejandola así
overflow: hidden;
Pero la hemos comentado para explicar que es lo que vamos a hacer para ir cambiando de imágenes.
Si os fijáis las imágenes estan configuradas en una linea horizontal, una al lado de otra, lo que haremos será ir moviendo el interior del contenedor en esa linea horizontal, modificando el margin-left, es decir, supongamos que nuestro margin-left en nuestra primera imagen es 0 y tenemos imágenes con un ancho de 600, pues lo que haríamos para movernos entre las imágenes sería ir modificando el margin-left en conjuntos de 600, es decir, la siguiente imagen tendria un margen de -600, la siguiente de -1200... y el - es necesario porque nuestro slide se movera de izquierda a derecha y como os podréis imaginar para que funcione en este ejemplo es necesario que el ancho de las imágenes sea el mismo o muy parecido (podríamos manejar el ancho de cada li dentro de la lista pero prefiero dejar el código más claro).
Creo que está más o menos explicado el concepto de lo que queremos hacer, veamos como lo hacemos
//Variable de ayuda para gestionar la posicion
var position = 0;
//Numero de imagenes para controlar
var images = config.images.length;
//intervalo en el que se cambia la imagen
var interval = setInterval(function(){
move();
}, 1400);
function move(){
//Cada vez que pase por aqui aumentamos la posicion
position++;
//Si la posicion es igual o mayor que la cantidad de imagenes
//ponemos position a 0
if (position >= images ){
position = 0
}
//Por ultimo movemos el margen según la posición en grupos de 600
$(".ninjaSlider ul").animate({
marginLeft: position * -600
},400);
Por último descomentamos el overflow:hidden en el fichero css y listo, ya lo tenemos
Ya tenemos nuestro slide funcionando, en este punto podríamos añadir más funcionalidad, que tuviera los puntitos típicos que te indican en que slide te encuentras y que puedes pulsar para moverte de uno a otro, o parar el slide por ejemplo. Eso lo haremos más adelante en algún post posterior ahora quería solo mostrar como podríamos hacer lo más básico de un slide, ahora lo ultimo que haremos será añadir un par de cosas al js para que se vaya pareciendo más a un plugin y podamos personalizarlo un poco más.
Si miramos el código detenidamente y pensamos un poco que cosas podrían ser susceptibles de cambiar, podrían ser:
- El ancho básico de las imágenes para ir moviendo el slide.
- La clase o id del slider (podriamos tener mas de uno por ejemplo)
- El intervalo de transición de las imágenes.
Estos son algunos de los cambios que se me han ocurrido con el código que tenemos actualmente podríamos tener más seguramente. Por el momento vamos a preparar esos.
Para empezar tenemos que plantearnos cuales son obligatorios y cuales podrían tener una configuración por defecto. Las imágenes deben ser obligatorias, por eso hemos puesto el control antes que nos lanzaría una alerta si no se pasa ninguna imagen, y a lo mejor el nombre del id del slide y el resto podemos tener valores por defecto si no nos lo pasan por parámetro.
Para ellos basta con usar el método extend de jQuery sobre el objeto que se pasa por parámetro
$.ninjaShow = function( config ){
config = $.extend({
slideName: "",
width: 600,
timeTransition: 1400,
images: []
}, config);
Este método lo que hace es sobreescribir el objeto local, que sería el primero (el que está entre { }) con el que se pasa por parámetro, pero solo las propiedades con el mismo nombre, es decir, no elimina el objeto por otro, es como si cambiaramos las propiedades que coincidan por las nuevas que se pasan por parámetro.
Y ahora simplemente es cambiar los elementos que tenemos puestos a mano como ".ninjaslider" por la propiedad correspondiente y listo, ya tendríamos preparado el código como si fuera un plugin quedando así (dejo comentado el código)
//Función anonima
(function(){
$.ninjaShow = function( config ){
config = $.extend({
slideName: "",
width: 600,
timeTransition: 1400,
images: []
}, config);
//Comprobamos que nos pasan alguna imagen
if (config.images.length == 0){
alert("Necesitamos alguna imagen para mostrar");
return;
}
//Comprobamos que nos han pasado un nombre para slider
if (config.slideName == ""){
alert("Falta el nombre o id donde estará el slider")
return
}
//Abrimos la lista
var imgList = "<ul>";
//Recorremos el array y vamos añadiendo lineas con nuestra imagen como source
config.images.map((img)=>{
imgList += '<li><img src="'+ img +'"</li>';
})
//Cerramos la lista
imgList += "</ul>";
//Adjuntamos la lista al contenedor
$(config.slideName).append(imgList);
//Variable de ayuda para gestionar la posicion
var position = 0;
//Numero de imagenes para controlar
var images = config.images.length;
//intervalo en el que se cambia la imagen
var interval = setInterval(function(){
move();
}, config.timeTransition);
function move(){
position++;
if (position >= images ){
position = 0
}
$(config.slideName + " ul").animate({
marginLeft: position * - config.width
},400);
}
}
})();
Como véis ahora tenemos config.algo por todas partes. Y para usarlo nos vamos a nuestro index.html y añadimos las propiedades necesarias:
<script>
$.ninjaShow({
slideName: ".ninjaSlider",
ancho: 600,
timeTransition: 1400,
images:['img/ninja1.jpg','img/ninja3.jpg','img/ninja4.jpg'],
});
</script>
Y podríamos como he comentado, crear más sliders simplemente creando el elemento, dandole un nombre y crear un nuevo ninjaShow
$.ninjaShow({
slideName: ".ninjaSlider",
ancho: 600,
timeTransition: 1400,
images:['img/ninja1.jpg','img/ninja3.jpg','img/ninja4.jpg'],
});
$.ninjaShow({
slideName: ".ninjaSlider2",
ancho: 600,
timeTransition: 1200,
images:['img/ninja4.jpg','img/ninja1.jpg','img/ninja3.jpg'],
});
Como véis ahora es muy sencillo crear sliders básicos con este código. En algún post posterior mejoraremos este slider para que tenga más funcionalidades, esto es básicamente para que veamos un poco como podemos trabajar con jQuery para hacer todo lo que queramos con el DOM.
Sin mucho más nos vemos en el siguiente, un abrazooorrrr.