Vamos a crear un Carousel o Slider de Imágenes con el framework Materialize CSS, muy util para paginas o sistemas.
Les invito a ver la Introduccion a Materialize para que resuelvan cualquier duda.
Para darle vida a un carousel o slider lo que necesitaremos es:
- Materialize
- JQuery
En la introducción a Materialze ya vimos la estructura de una pagina con materialize, vamos a usar esa estructura.
Contenedor
El contenedor de nuestro slider va a ser un row o fila y una columna.
[code language=”html”] <div class="container"><div class="section">
<div class="row">
<div class="col s12 m12">
<!– El slider va aqui–>
</div>
</div>
</div>
</div>
[/code]
Las columnas en materialize usan la clase col, y para definir el tamaño de la columna en pantallas medianas usamos mX donde x es un numero del 1 al 12, donde 12 es todo lo ancho de la pagina o contenedor superior.
Para pantallas pequeñas se usa sX donde X es un numero del uno al 12, y 12 es todo lo ancho de la pagina.
En mi ejemplo el slider va a ocupar todo el ancho de la pagina.
Slider o carousel con materialize
Ya que tenemos el contenedor, nos fijamos donde vamos a colocar el slider.
Para crear un carousel vamos a usar lo siguiente:
[code language=”html”] <div class="carousel carousel-slider "><!– Los items van aqui –>
<a class="carousel-item"><img src="images/image1.jpg"></a>
</div>
[/code]
Es un div con las clases “carousel carousel-slider” y dentro de este div colocaremos los elementos, imagenes o cualquier contenido.
Los items deben tener la clase “carousel-item” tal como se muestran en el ejemplo de arriba.
Inicializar el Slider o Carousel
Para que el carousel funcione tenemos que incializarlo usando el siguiente script de jquery.
[code language=”javascript”] $(document).ready(function(){// este es el script del slider
$(‘.carousel.carousel-slider’).carousel({
fullWidth: true,
indicators: true
});
});
[/code]
Y listo ya tenemos nuestro slider.
Resultado
Este es el resultado del código de ejemplo que utilice.
Descarga
Puedes descargar todos los archivos que use en el ejemplo, en el siguiente link.
[sociallocker]Link: https://drive.google.com/file/d/1S2FH1I2s8iGvb-coerZpXD67D9AVAzXF/view
[/sociallocker]Dudas y comentarios ?