MaterializeCSS

Slider

Para crear nuestro Slider, tenemos que envolver todo el contenido en un div con clase slider.
Dentro creamos una lista ul con clase slides
Cada elemento li contendra una imagen y un div con las clases caption y center-align. Donde incluiremos el texto que queremos mostrar sobre la imagen
Y tenemos que inicializar los Scripts

<div class="slider">
    <ul class="slides">
        <li>
            <img src="images/carrusel1.png" alt="">
            <div class="caption center-align">
                <h3 class="black-text">Curso BootStrap</h3>
                <h5 class="black-text">Curso sobre este fantastico FrameWork</h5>
            </div>
        </li>
        <li>
            <img src="images/carrusel2.png" alt="">
            <div class="caption center-align">
                <h3 class="black-text">Curso FlexBox</h3>
                <h5 class="black-text">Curso sobre este modelo de diseño web CSS</h5>
            </div>
        </li>
        <li>
            <img src="images/carrusel3.png" alt="">
            <div class="caption center-align">
                <h3 class="black-text">Curso Ionic</h3>
                <h5 class="black-text">Curso sobre este fantastico FrameWork de aplicaciones para moviles</h5>
            </div>
        </li>
    </ul>
</div>

Curso BootStrap

Curso sobre este fantastico FrameWork
Curso FlexBox

Curso sobre este modelo de diseño web CSS
Curso Ionic

Curso sobre este fantastico FrameWork de aplicaciones para moviles

<script>
    //Inicializamos todos los Scripts
    document.addEventListener('DOMContentLoaded', function () {
        var elems = document.querySelectorAll('.slider');
        var instances = M.Slider.init(elems);
    });
</script>

Curso BootStrap

Curso sobre este fantastico FrameWork
Curso FlexBox

Curso sobre este modelo de diseño web CSS
Curso Ionic

Curso sobre este fantastico FrameWork de aplicaciones para moviles

<script>
    //Inicializamos todos los Scripts
    document.addEventListener('DOMContentLoaded', function () {
        var elems = document.querySelectorAll('.slider');
        var instances = M.Slider.init(elems, {
            indicators: false,
            height: 200,
            duration: 250,
            interval: 3000
        });
    });
</script>

Opciones

Name	Type	Default	Description
indicators	Boolean	true	False oculta los indicadores.
height	Number	400	Establece el alto del Slider.
duration	Number	500	Establece la duracion de la transicion animada en ms.
interval	Number	6000	Establece la duracion entre transsiciones en ms.

Material Box

Para usar este efecto creamos una imagen con clase materialboxed y para que sea responsive añadimos la clase responsive-img
Podemos poner una descripccion de la imagen añadiendo el atributo data-caption a la imagen
Y como siempre inicializamos el script

<img src="images/carrusel1.png" alt="" class="materialboxed responsive-img" data-caption="Esto es la descripccion de la imagen">
-----------------------------------
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var elems = document.querySelectorAll('.materialboxed');
        var instances = M.Materialbox.init(elems);
    });
</script>

Opciones

Name	Type	Default	Description
inDuration	Number	275	Duracion de la transicion de entrada en milisegundos
outDuration	Number	200	Duracion de la transicion de salida en milisegundos.
onOpenStart	Function	null	Funcion Callback llamada antes de abrirse el materialbox.
onOpenEnd	Function	null	Funcion Callback llamada despues de abrirse el materialbox.
onCloseStart	Function	null	Funcion Callback llamada antes de cerrarse el materialbox.
onCloseEnd	Function	null	Funcion Callback llamada despues de cerrarse el materialbox.

Media

Slider

Curso BootStrap

Curso sobre este fantastico FrameWork

Curso FlexBox

Curso sobre este modelo de diseño web CSS

Curso Ionic

Curso sobre este fantastico FrameWork de aplicaciones para moviles

Curso BootStrap

Curso sobre este fantastico FrameWork

Curso FlexBox

Curso sobre este modelo de diseño web CSS

Curso Ionic

Curso sobre este fantastico FrameWork de aplicaciones para moviles

Opciones

Material Box

Opciones