¡Hola amigos!, hoy aprenderemos cómo crear un slider fácil con jQuery, algo muy básico pero super útil si te dedicas al desarrollo web, en esta entrada te mostrare el código html, css y javascript, agregado a esto implementaremos una librería de animaciones CSS Animate.css para dar un poco de estilo, te invito a que continúes leyendo y aprendas como crear un slider fácil con jQuery por ti mismo.
Contenido
Código HTML
Para iniciar con el html, dentro de la etiqueta <head> importamos dos hojas de estilo, en la primera style.css declaramos el estilo que contendrá el slider, mas adelante veremos su código, la segunda corresponde a la librería animate.css que usaremos para las animaciones.
Dentro de la etiqueta <body> creamos un div de la clase contenedor, en su interior colocaremos las imágenes cada una en su respectivo div, para el primer div aplicamos el estilo display: inline-block para asegurarnos que muestre la primer imagen una vez que la pagina termine de cargar.
Posterior a esto incluimos dos botones que permiten hacer cambios de manera manual a los usuarios en el slider, antes de cerrar el body importamos la librería de jQuery y el archivo proces.js que contiene el funcionamiento principal de este ejemplo.
Para el uso de la librería animate.css simplemente se agrega la clase animated al elemento que deseamos animar, enseguida se especifica el nombre de la clase con la animación que deseamos, en nuestro caso lo hacemos dentro de la etiqueta <img>, quedaría de la siguiente forma: <img class=”animated zoomIn” src=”img/objeto1.png”/>
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo Slider ~ DenisseEstrada</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
</head>
<body>
<section>
<div class="contenedor">
<div style="display:inline-block;">
<img class="animated zoomIn" src="img/objeto1.png"/>
</div>
<div>
<img class="animated rotateIn" src="img/objeto2.png"/>
</div>
<div>
<img class="animated fadeInRightBig" src="img/objeto3.png"/>
</div>
<div>
<img class="animated rotateInDownLeft" src="img/objeto4.png"/>
</div>
<div>
<img class="animated bounceInDown" src="img/objeto5.png"/>
</div>
</div>
<center><button class="anterior"><img src="img/anterior.png"/></button>
<button class="siguiente"><img src="img/siguiente.png"/></button></center>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/process.js"></script>
</body>
</html>Código CSS
En el css especificamos las dimensiones de los div y de las imágenes. Es importante tener en cuenta que todos nuestros contenedores div se establecen en display:none, si no fuera así, todas nuestras imágenes serían visibles al mismo tiempo, por medio de JavaScript estableceremos un solo div como inline-block, mientras que el resto permanecen ocultos.
.contenedor{
max-idth: 1000px;
margin: auto;
position: relative;
}
.contenedor div{
width: 100%;
display: none;
}
.contenedor img{
width: 100%;
height: auto;
}
button{
margin-top:30px;
border: none;
background: white;
}
button img{
height: 40px;
}Código JavaScript
En el siguiente código es donde programamos los cambios automáticos o manuales en el slider, lo primero que tenemos que hacer es declarar algunas variables importantes:
- actualIndice: la iniciamos en 0.
- objetos: en esta variable se guardara una matriz con los nodos div que tenemos dentro de la clase contenedor.
- numeroObjetos:almacena la longitud de nuestra variable objetos, esta variable nos dirá la cantidad de imágenes en el slider.
Enseguida creamos una función llamada cambiarImagen, lo que hacemos es, de la variable objetos obtenemos la posición de la imagen a mostrar por medio de la función de jQuery .eq() pasandole como parámetro la variable actualIndice y lo guardamos en la variable imagen, ocultamos todos los objetos y finalmente ponemos visible solo la que tiene la variable imagen con display:inline-block.
Para asegurarnos de que nuestras imágenes giran de forma automática, es necesario llamar continuamente nuestra función cambiarImagen después de una cierta cantidad de tiempo. Hacemos esto mediante la creación de otra variable llamada proceso,esta variable almacena una función setInterval, que tiene un retardo de 3000 milisegundos o tres segundos. Dentro de esa función, incrementamos la variable actualIndice en uno, por lo que objetos.eq(actualIndice); siempre hará referencia al siguiente contenedor div.
A continuación, se define una sentencia if muy importante, esta declaración dice que si nuestra variable actualIndice es mayor que la cantidad total de imágenes en nuestro slider esta se restablezca de nuevo a cero. Después de la sentencia if, llamamos nuestra función cambiarImagen.
Finalmente definimos nuestras acciones para los botones siguiente y anterior, al hacer click sobre alguno de estos botones cancelamos el proceso que teníamos para el funcionamiento automático por medio de la función limpiarIntervalo,al desplazarnos manualmente por las imágenes el botón siguiente suma uno a la variable actualIndice, mientras que el botón anterior resta uno a la misma variable.
var proceso;
$(document).ready(function(){
var actualIndice = 0;
var objetos = $('.contenedor div');
var numObjetos = objetos.length;
function cambiarImagen(){
var imagen = objetos.eq(actualIndice);
objetos.hide();
imagen.css('display','inline-block');
}
proceso = setInterval(function(){
actualIndice += 1;
if(actualIndice > (numObjetos -1)){
actualIndice = 0;
}
cambiarImagen();
}, 3000);
$('.siguiente').click(function(){
limpiarIntervalo();
actualIndice += 1;
if (actualIndice > (numObjetos -1)){
actualIndice = 0;
}
cambiarImagen();
});
$('.anterior').click(function(){
limpiarIntervalo();
actualIndice -= 1;
if (actualIndice < 0 ){
actualIndice = numObjetos-1;
}
cambiarImagen();
});
});
function limpiarIntervalo(){
window.clearInterval(proceso);
}Resultado
Puedes checar el resultado en el siguiente enlace Slider con jQuery, espero que sea de gran ayuda este sencillo tutorial para aprender como crear un slider fácil con jQuery, ahora ya sabes como darle un toque especial a tus sitios web, Saludos! 🙂