¿Cómo mostrar el carrusel de arranque con tres publicaciones en cada diapositiva?

Posted on by Rudeus Greyrat

Un carrusel Bootstrap es una presentación de diapositivas para rotar a través de una serie de contenidos. Está construido con CSS y Javascript. Funciona con una serie de fotos, imágenes, textos, etc. Puede usarse como un control deslizante de imágenes para mostrar la gran cantidad de contenido dentro de un pequeño espacio en la página web, ya que funciona según el principio de presentaciones dinámicas.

Sintaxis:

<div class="container"> Bootstrap image contents... <div>

Los siguientes son los pasos para crear un carrusel de Bootstrap:

  1. Incluya archivos Bootstrap Javascript, CSS y JQuery Library en las secciones principales, que están precargados y precompilados

    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js">
  2. Aplique CSS para cambiar el tamaño del cuerpo de la tarjeta .carousel Bootstrap utilizando el segmento de código a continuación.

    <style>
     .carousel {
     width:200px;
     height:200px;
     }
     <style>
  3. En la sección del cuerpo, cree una clase de división con un control deslizante de carrusel utilizando la siguiente sintaxis

    <div id=”carousel-demo” class=”carousel slide” data-ride=”carousel”>
  4. En este paso, las imágenes deslizantes se definen en la etiqueta de división como se muestra a continuación.

    <div class=”carousel-inner”>
    <div class=”item”>
    <img src=”..URL of image”>
  5. El último paso es agregar controles a las imágenes de diapositivas usando la clase de control de carrusel como se muestra a continuación.

    <a class="left carousel-control" href="#carousel-demo2" data-slide="prev">
        <span class="icon-prev"></span>
    </a>
    <a class="right carousel-control" href="#carousel-demo2" data-slide="next">
        <span class="icon-next"></span>
    </a>

Nota:
Repetimos el paso no. 4 tantas veces dependiendo de cuántas imágenes proporcionemos dentro del control deslizante del carrusel y el paso 3 exactamente dos veces para mostrar dos secciones en la tarjeta Bootstrap con el control deslizante de imágenes .carousel

Ejemplo 1: implementemos el enfoque anterior y creemos una tarjeta Bootstrap usando HTML, CSS, Js con control deslizante de imagen primero y luego avancemos en el siguiente ejemplo para agregar múltiples filas y múltiples columnas.

<!DOCTYPE html>
<html>
  
<head>
    <!--Add pre compiled library files -->
    <!--Automatics css and js adder-->
    <!--auto compiled css & Js-->
    <script type="text/javascript" 
            src="//code.jquery.com/jquery-1.9.1.js">
  </script>
    <link rel="stylesheet" 
          type="text/css" 
          href="/css/result-light.css">
    <script type="text/javascript" 
            src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
  </script>
    <link rel="stylesheet" 
          type="text/css" 
          href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <link rel="stylesheet" 
          type="text/css" 
          href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  
</head>
  
<body>
    <!-- create a bootstrap card in a container-->
    <div class="container">
        <!--Bootstrap card with slider class-->
        <div id="carousel-demo" 
             class="carousel slide" 
             data-ride="carousel">
            <div class="carousel-inner">
                <div class="item">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190709143850/1382.png">
                </div>
                <div class="item">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190709143855/223-1.png">
                </div>
                <div class="item active">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190709143904/391.png">
                </div>
            </div>
            <!--slider control for card-->
            <a class="left carousel-control"
               href="#carousel-demo"
               data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left">
              </span>
            </a>
            <a class="right carousel-control" 
               href="#carousel-demo" 
               data-slide="next">
                <span class="glyphicon glyphicon-chevron-right">
              </span>
            </a>
        </div>
    </div>
</body>
  
</html>

Producción:

Ejemplo 2: ahora ampliamos la implementación del ejemplo 1 para mostrar varias imágenes en un carrusel de Bootstrap, todas a la vez con el control deslizante en los extremos.
A continuación se muestra la implementación de un fragmento de código HTML con estilo.

<!DOCTYPE html>
<html>
  
<head>
    <!--auto compiled css & Js-->
    <script type="text/javascript"
            src="//code.jquery.com/jquery-1.9.1.js">
  </script>
    <link rel="stylesheet" 
          type="text/css" 
          href="/css/result-light.css">
    
    <script type="text/javascript" 
            src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
  </script>
    <link rel="stylesheet" 
          type="text/css" 
          href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <link rel="stylesheet"
          type="text/css" 
          href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!-- JavaScript for adding 
     slider for multiple images
     shown at once-->
    <script type="text/javascript">
        $(window).load(function() {
            $(".carousel .item").each(function() {
                var i = $(this).next();
                i.length || (i = $(this).siblings(":first")),
                  i.children(":first-child").clone().appendTo($(this));
                
                for (var n = 0; n < 4; n++)(i = i.next()).length ||
                  (i = $(this).siblings(":first")),
                  i.children(":first-child").clone().appendTo($(this))
            })
        });
    </script>
  
</head>
  
<body>
    <!-- container class for bootstrap card-->
    <div class="container">
        <!-- bootstrap card with row name myCarousel as row 1-->
        <div class="carousel slide" id="myCarousel">
            <div class="carousel-inner">
                <div class="item active">
                    <div class="col-xs-2">
                        <a href="#">
                          <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190709143904/391.png" 
                               class="img-responsive">
                      </a>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xs-2">
                        <a href="#">
                          <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190709143850/1382.png" 
                               class="img-responsive">
                      </a>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xs-2">
                        <a href="#">
                          <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190709143855/223-1.png" 
                               class="img-responsive">
                      </a>
                    </div>
                </div>
            </div> <a class="left carousel-control"
                      href="#myCarousel"
                      data-slide="prev">
          <i class="glyphicon glyphicon-chevron-left">
          </i>
          </a>
            <a class="right carousel-control" 
               href="#myCarousel" 
               data-slide="next">
              <i class="glyphicon glyphicon-chevron-right">
              </i>
          </a>
  
        </div>
    </div>
</body>
  
</html>

Producción:

Ejemplo 3: ahora creamos una tarjeta Bootstrap con múltiples imágenes apiladas en filas y columnas usando un control deslizante.
Mostramos varias publicaciones cada una en un carrusel de arranque, es decir, mostramos varias imágenes usando la tabla de array.
A continuación se muestra la implementación de un fragmento de código HTML con estilo.

<!DOCTYPE html>
<html>
  
<head>
    <!-- auto compiled css and js library files-->
    <script type="text/javascript" 
            src="//code.jquery.com/jquery-1.9.1.js">
  </script>
    <link rel="stylesheet" 
          type="text/css" 
          href="/css/result-light.css">
    <script type="text/javascript" 
            src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
  </script>
    <link rel="stylesheet" 
          type="text/css" 
          href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    
    <link rel="stylesheet" 
          type="text/css" 
          href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script type="text/javascript">
        <!-- JavaScript to slide images horizontally-->
        $(window).load(function() {
            $(".carousel .item").each(function() {
                var i = $(this).next();
                i.length || (i = $(this).siblings(":first")),
                  i.children(":first-child").clone().appendTo($(this));
                
                for (var n = 0; n < 4; n++)(i = i.next()).length || 
                  (i = $(this).siblings(":first")), 
                  i.children(":first-child").clone().appendTo($(this))
            })
        });
    </script>
  
</head>
  
<body>
    <!--container class-->
    <div class="container">
        <!-- myCarousel as row 1 in bootstrap card named container-->
        <div class="carousel slide" id="myCarousel">
            <div class="carousel-inner">
                <div class="item active">
                    <div class="col-xs-2">
                        <a href="#">
                          <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190709143855/223-1.png" 
                               class="img-responsive">
                      </a>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xs-2">
                        <a href="#">
                         <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190709143904/391.png" 
                              class="img-responsive">
                      </a>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xs-2">
                        <a href="#">
                          <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190709143910/457.png" 
                               class="img-responsive">
                      </a>
                    </div>
                </div>
            </div>
            <!-- row 1 of bootstrap card control-->
            <a class="left carousel-control" 
               href="#myCarousel" 
               data-slide="prev">
                
              <i class="glyphicon glyphicon-chevron-left">
              </i>
          </a>
            <a class="right carousel-control" 
               href="#myCarousel" 
               data-slide="next">
              <i class="glyphicon glyphicon-chevron-right">
              </i>
          </a>
  
        </div>
        <!-- myCarousel as row 2 of 
             bootstrap card named container-->
        <div class="carousel slide" id="myCarousel2">
            <div class="carousel-inner">
                <div class="item active">
                    <div class="col-xs-2">
                        <a href="#">
                          <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190709143910/457.png" 
                               class="img-responsive">
                      </a>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xs-2">
                        <a href="#">
                          <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190709143904/391.png" 
                               class="img-responsive"></a>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xs-2">
                        <a href="#">
                          <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190709143850/1382.png" 
                               class="img-responsive">
                      </a>
                    </div>
                </div>
            </div>
            <!-- myCarousel2, control of row
                 2 of container class bootstrap card-->
            <a class="left carousel-control" 
               href="#myCarousel2" 
               data-slide="prev">
              <i class="glyphicon glyphicon-chevron-left">
              </i>
          </a>
            <a class="right carousel-control"
               href="#myCarousel2"
               data-slide="next">
              <i class="glyphicon glyphicon-chevron-right">
              </i>
          </a>
  
        </div>
  
    </div>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por Pritesh Ranjan 1 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 *