¿Cómo hacer un carrusel usando CSS?

En este artículo, aprenderemos cómo hacer un carrusel usando CSS simple sin usar ninguna otra biblioteca o marco. Un carrusel es una presentación de diapositivas que contiene una colección de pancartas/imágenes giratorias. Por lo general, puede ver carruseles en la página de inicio de un sitio web. Hace que su sitio web sea más atractivo.

Vamos a hacer un carrusel de 4 imágenes que se puede controlar con botones ubicados en la parte inferior del carrusel. Hay un texto en el centro del carrusel que está fijo y no puede moverse con el movimiento de la imagen. Las imágenes se mueven después de un intervalo de tiempo fijo en el fondo. 

Estamos usando HTML como estructura básica para nuestro carrusel y CSS para decorarlo. A continuación se muestra el procedimiento paso a paso que vamos a seguir.

Paso 1: Primero, agregamos el código HTML. Contiene el contenedor principal y dentro de un contenedor hay dos cosas:

  • el encabezado principal de la página web
  • es un div con contenido de clase que contiene toda la estructura del carrusel.

Paso 2: Ahora, agregaremos las siguientes dos partes en el div de contenido :

  • La primera parte es un div con contenido de carrusel de clase. El contenido (título y subtítulo) se coloca en el centro del carrusel. Este permanecerá estático en el carrusel.
  • La segunda parte es un div con una presentación de diapositivas de clase. Todas las partes móviles del carrusel estarán dentro de este div.

Paso 3: El div de presentación de diapositivas contiene los siguientes elementos:

  • Cuatro botones de control de carrusel
  • un envoltorio de presentación de diapositivas que envuelve las 4 imágenes del carrusel.

Luego, agregamos CSS para diseñar nuestro carrusel y hacer que el carrusel responda a todos los tamaños de pantalla.

NOTE: We will use "rem" and "%" units 
as much as possible to achieve responsiveness 
easily.

A continuación se muestra la implementación del enfoque anterior.

Ejemplo:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /* default stylings */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
  
        /* provides background color to body */
        body {
            background-color: rgb(255, 235, 235);
        }
  
        /* ----- container stylings: 
        -> centers the whole content of the page
        -> defines width and height for container ----- */
        .container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin: auto;
            width: 800px;
            height: 600px;
        }
        /* ----- end of container stylings ----- */
  
        /* provides padding to main heading */
        .main-heading {
            padding: 2rem 0 2rem 0;
        }
  
        .content {
            position: relative;
        }
  
        /* ----- carousel content stylings ----- */
        /* places the carousel content on center of the carousel */
        .carousel-content {
            position: absolute;
            /*to center the content horizontally and vertically*/
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%); 
            text-align: center;
            z-index: 50;
        }
        .carousel-heading {
            font-size: 3rem;
            color: #308d46;
            margin-bottom: 1rem;
        }
        /*----- end of carousel content stylings ----- */
  
        /* ----- slideshow stylings ----- */
        .slideshow {
            height: 100%;
            overflow: hidden; /* to hide slides in x-direction */
            position: relative;
        }
        /* wrapper which wraps all the slideshow images stylings */
        .slideshow-wrapper {
            display: flex;
            /* We give it width as 400% because we are making a 
               4 image carousel. If you want to make for example, 
               5 images carousel, then give width as 500%. */
            width: 400%;
            height: 100%;
            position: relative;
            /* you can change the animation settings from below */
            animation: slideshow 20s infinite;
         }
        /* define width and height for images*/
        .slide {
            width: 100%;
            height: 100%;
        }
        .slide-img {
            width: 100%;
            height: 100%;
            object-fit: cover; 
        }
        /* @keyframes are used to provide animations
           We make these settings for 4 image carousel.
           Make modification according to your needs. */
        @keyframes slideshow {
            0%  { left: 0; }
            10% { left: 0; }
            15% { left: -100%; }
            25% { left: -100%; }
            30% { left: -200%; }
            40% { left: -200%; }
            45% { left: -300%; }
            55% { left: -300%; }
            60% { left: -200%; }
            70% { left: -200%; }
            75% { left: -100%; }
            85% { left: -100%; }
            90% { left: 0%; }
        }
        /* ----- end of slideshow stylings ----- */
  
        /* ----- carousel control buttons stylings ----- */
        .slide-btn {
            background-color: #bbb;
            border-radius: 50%;
            border: .2rem solid #d38800;
            width: 1.2rem;
            height: 1.2rem;
            outline: none;
            cursor: pointer;
            /* stylings for positioning the buttons at
               the bottom of the carousel */
            position: absolute;
            bottom: 3%;
            left: 50%;
            transform: translateX(-50%);
            z-index: 70;
        }
        /* As we provide position as absolute, 
        the buttons places one over the other. 
        So, we have to place them individually
        at their correct positions. */
        .slide-btn-1 {
            left: 45%;
        }
        .slide-btn-2 {
            left: 50%;
        }
        .slide-btn-3 {
            left: 55%;
        }
        .slide-btn-4 {
            left: 60%;
        }
        /* When we focus on the particular button, 
        the animation stops to that particular image 
        to which the button is associated. */
        .slide-btn-1:focus~.slideshow-wrapper {
            animation: none;
            left: 0;
        }
        .slide-btn-2:focus~.slideshow-wrapper {
            animation: none;
            left: -100%;
        }
        .slide-btn-3:focus~.slideshow-wrapper {
            animation: none;
            left: -200%;
        }
        .slide-btn-4:focus~.slideshow-wrapper {
            animation: none;
            left: -300%;
        }
        /* when we focus on the button, the background color changes */
        .slide-btn:focus {
            background-color: #308d46;
        }
        /* ----- end of carousel control buttons stylings ----- */
    </style>
    <title>Geeks For Geeks</title>
</head>
<body>
    <div class="container">
        <h1 class="main-heading">Responsive Carousel using CSS</h1>
        <div class="content">
            <!-- The content which is placed at the center of the carousel -->
            <div class="carousel-content">
                <h1 class="carousel-heading">
                    GeeksforGeeks
                </h1>
                <h3>A computer science portal for geeks</h3>
            </div>
            <div class="slideshow">
                <!-- carousel control buttons -->
                <button class="slide-btn slide-btn-1"></button>
                <button class="slide-btn slide-btn-2"></button>
                <button class="slide-btn slide-btn-3"></button>
                <button class="slide-btn slide-btn-4"></button>
                <!-- carousel wrapper which contains all images -->
                <div class="slideshow-wrapper">
                    <div class="slide">
                        <img class="slide-img"
                            src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210818140124/image1-300x169.png">
                    </div>
                    <div class="slide">
                        <img class="slide-img"
                            src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210818140126/image2-300x169.png">
                    </div>
                    <div class="slide">
                        <img class="slide-img" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210818190339/image5-300x185.png">
                    </div>
                    <div class="slide">
                        <img class="slide-img" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210818141837/image4-300x168.png">
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Salida: A partir de esto, podemos ver que el carrusel se ve hermoso para todos los tamaños de pantalla, es decir, pantallas de dispositivos móviles, tabletas y computadoras portátiles. Realice modificaciones al código anterior de acuerdo con su elección, inclúyalo en su proyecto y diviértase creando proyectos increíbles.

Publicación traducida automáticamente

Artículo escrito por iaditijain08 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 *