Carrusel usando Materialise CSS

Posted on by Rudeus Greyrat

Materialise CSS es una biblioteca de componentes de interfaz de usuario creada y diseñada por Google. Es un lenguaje de diseño que combina los principios clásicos del diseño exitoso junto con la innovación y la tecnología.

Características:

  • Marco de CSS front-end responsivo.
  • Es independiente del navegador.
  • Extensible.
  • Es de uso gratuito.
  • Su énfasis está en diferentes acciones y componentes.
  • Requiere el uso de la biblioteca jQuery JavaScript.

En este artículo, vamos a crear un carrusel 3D usando materialise CSS, que es muy interesante y fácil de diseñar. Materialise CSS carrusel es un componente robusto y versátil. Es táctil, lo que facilita su uso en dispositivos móviles. 

Sintaxis:

HTML

<div class="carousel">
    <a class="carousel-item" href="#one!">
        <img src="">
    </a>
    <a class="carousel-item" href="#two!">
        <img src="">
    </a>
    <a class="carousel-item" href="#three!">
        <img src="">
    </a>
    <a class="carousel-item" href="#four!">
        <img src="">
    </a>
    <a class="carousel-item" href="#five!">
        <img src=""
    ></a>
</div>

jQuery/JavaScript para la inicialización:

Javascript

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.carousel');
    var instances = M.Carousel.init(elems, options);
});
    
$(document).ready(function(){
    $('.carousel').carousel();
});

Ejemplo 1: Usando los fragmentos de código anteriores, podemos crear fácilmente nuestro carrusel proporcionando la fuente de las imágenes y los hipervínculos (si es necesario) para esas imágenes. Veamos el ejemplo a continuación.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  
    <script type="text/javascript" 
src="https://code.jquery.com/jquery-1.12.0.min.js">
    </script>
  
    <!-- Compiled and minified JavaScript -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js">
    </script>
      
    <script>
        $(document).ready(function () {
            $('.carousel').carousel();
        });
    </script>
  
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: coral;
        }
  
        a {
            height: 900px;
            width: 650px;
        }
  
        .carousel {
            height: 800px;
            perspective: 950px;
            transform: translateY(-100px);
        }
  
        .carousel carousel-item {
            width: 7050px;
        }
  
        img {
            width: 100%;
            height: 200px;
        }
  
        h4 {
            margin: 0;
            padding: 0;
            background: #fff;
            color: #000;
            box-sizing: border-box;
            padding: 10px 5px;
            font-weight: bold;
            font-size: 20px;
            text-align: center;
        }
    </style>
</head>
  
<body>
    <div class="carousel">
        <div class="carousel-item">
            <a href=
"https://www.geeksforgeeks.org/how-to-create-responsive-image-gallery-using-html-css-jquery-and-bootstrap/">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200130114641/responsivegallary1.png">
            </a>
            <h4>Responsive image gallery</h4>
        </div>
          
        <div class="carousel-item">
            <a href=
"https://www.geeksforgeeks.org/how-to-create-a-tab-image-gallery/">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20191205124138/5510.png">
            </a>
            <h4>Tab image gallery</h4>
        </div>
  
        <div class="carousel-item">
            <a href=
"https://www.geeksforgeeks.org/html-course-building-header-of-the-website/">
                <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Screenshot-25-1024x453.png">
            </a>
            <h4>Building header of a website</h4>
        </div>
  
        <div class="carousel-item">
            <a href=
"https://www.geeksforgeeks.org/how-to-design-image-slider-using-jquery/">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200214124104/imageslider1.png">
            </a>
            <h4>image slider</h4>
        </div>
  
        <div class="carousel-item">
            <a href=
"https://www.geeksforgeeks.org/how-to-create-image-lightbox-gallery-using-html-css-and-javascript/">
                <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200320161020/Screenshot-from-2020-03-20-16-06-36.png">
            </a>
            <h4>image lightbox gallery</h4>
        </div>
    </div>
</body>
  
</html>

Producción:

Control deslizante de ancho completo: de la misma manera, también podemos crear un control deslizante de ancho completo configurando la opción jQuery fullWidth en true . También podemos tener indicadores que aparecen en la parte inferior del control deslizante. Este control deslizante también es compatible con toques.

Para crear este tipo de control deslizante, tenemos una clase como » carrusel carrusel-deslizador » y dentro de este div , colocamos las imágenes utilizadas para crear el control deslizante como se muestra a continuación.

HTML

<div class="carousel carousel-slider">
    <a class="carousel-item" href="#one!">
        <img src="">
    </a>
    <a class="carousel-item" href="#two!">
        <img src="">
    </a>
    <a class="carousel-item" href="#three!">
        <img src="">
    </a>
    <a class="carousel-item" href="#four!">
        <img src="">
    </a>
</div>

El script jQuery se cambiará como se muestra a continuación.

Javascript

$('.carousel.carousel-slider').carousel({
    fullWidth: true
});

Ejemplo 2:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
  
    <script type="text/javascript" 
src="https://code.jquery.com/jquery-1.12.0.min.js">
    </script>
  
    <!-- Compiled and minified JavaScript -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js">
    </script>
  
    <script>
        $(document).ready(function () {
            $('.carousel.carousel-slider').carousel(
                {
                    fullWidth: true,
                    indicators: true
                }
            );
        });
    </script>
</head>
  
<body>
    <div class="carousel carousel-slider center">
        <div class="carousel-item pink" href="#one!">
            <h2>First Panel</h2>
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210818182611/Blogathon-2021-Write-From-Home-Contest-By-GeeksforGeeks.png">
        </div>
  
        <div class="carousel-item blue" href="#two!">
            <h2>Second Panel</h2>
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210818192517/Blogathon-2021-Prizes.png">
        </div>
  
        <div class="carousel-item grey" href="#three!">
            <h2>Third Panel</h2>
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200921183727/about-carousel.png">
        </div>
  
        <div class="carousel-item yellow" href="#four!">
            <h2>Fourth Panel</h2>
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200727190538/Group-4362.png">
        </div>
    </div>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por namaldesign y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *