Base CSS Órbita

Posted on by Rudeus Greyrat

Foundation CSS es un marco front-end receptivo y de código abierto creado por ZURB en septiembre de 2011 que simplifica la creación de sorprendentes sitios web, aplicaciones y correos electrónicos receptivos que funcionan en cualquier dispositivo. Muchas empresas, como Facebook, eBay, Mozilla, Adobe e incluso Disney, lo utilizan. El marco se basa en bootstrap, que es similar a SaaS. Es más complejo, versátil y configurable. También viene con una interfaz de línea de comandos, lo que facilita su uso con paquetes de módulos. El marco de correo electrónico le proporciona correos electrónicos HTML receptivos, que se pueden leer en cualquier dispositivo. Foundation for Apps le permite crear aplicaciones web totalmente receptivas.

Foundation CSS Orbit se usa para crear el control deslizante que desliza los elementos usando la clase de órbita. Podemos poner cualquier tipo de contenido dentro de las diapositivas. 

En este artículo, discutiremos Orbit en Foundation CSS.

Temas básicos de órbita CSS:

  • Conceptos básicos: Crearemos la órbita básica.
  • Contenido de la diapositiva: crearemos el control deslizante para deslizar el contenido usando algunas clases.

Clases de órbita de CSS de la fundación:

  • orbit: Esta clase se utiliza para crear la órbita básica.
  • orbit-container: esta clase se utiliza para crear un contenedor orbital.
  • orbit-wrapper: esta clase se utiliza para envolver el contenedor de órbita.
  • orbit-controls: esta clase se usa para controlar la órbita usando botones.
  • orbit-image: Esta clase se utiliza para insertar una imagen en el contenedor.
  • orbit-previous: esta clase se utiliza para navegar a la diapositiva anterior.
  • orbit-next: esta clase se utiliza para navegar a la siguiente diapositiva.
  • orbit-slide: Esto se usa para crear una diapositiva de contenedor de órbita.

Sintaxis:

<div class="orbit" role="region" data-orbit>
  <div class="orbit-wrapper">
    <ul class="orbit-container">
       ....
    </ul>
  </div>
</div>

Ejemplo 1: el siguiente código demuestra los conceptos básicos de Foundation CSS Orbit .

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
  <title> Foundation CSS Orbit </title>
  <!-- Compressed CSS -->
  <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" >
  
  <!-- Compressed JavaScript -->
  <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js" >
  </script>
  <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" >
  </script>
</head>
  
<body>
    <center>
        <h2 style="color:green;">  GeeksforGeeks </h2> 
        <strong>  Foundation CSS Orbit  </strong> 
     </center>
  
    <div class="orbit" role="region"  data-orbit data-use-m-u-i="false">
        <ul class="orbit-container">
          <button class="orbit-previous"  aria-label="previous">
            <span class="show-for-sr"> Previous </span>
            ◀
          </button>
          <button class="orbit-next" 
                  aria-label="next"> 
            <span class="show-for-sr"> Next </span>
            ▶
          </button>
  
          <li class="is-active orbit-slide">
            <div>
              <h3 class="text-center"> GFG slide 1 </h3>
              <p class="text-center">
                A Computer Science portal for geeks. 
                It contains well written, well thought 
                and well explained computer science and 
                programming articles 
              </p>
  
            </div>
          </li>
  
          <li class="orbit-slide">
            <div>
              <h3 class="text-center"> GFG slide 2 </h3>
              <p class="text-center">
                GeeksforGeeks.org was created with 
                a goal in mind to provide well written, 
                well thought and well explained solutions 
                for selected questions.
              </p>
  
            </div>
          </li>
  
          <li class="orbit-slide">
            <div>
              <h3 class="text-center"> GFG slide 3 </h3>
              <p class="text-center">
                It contains well written, well thought
                and well explained computer science and
                programming articles. A Computer Science
                portal for geeks. 
              </p>
  
            </div>
          </li>
        </ul>
  
        <nav class="orbit-bullets">
          <button class="is-active" 
                  data-slide="0">
            <span class="show-for-sr"> GFG slide 1 </span>
            <span class="show-for-sr"> Current Slide </span> 
          </button>
  
          <button data-slide="1"> 
            <span class="show-for-sr"> GFG slide 2 </span>
          </button>
  
          <button data-slide="2"> 
            <span class="show-for-sr"> GFG slide 3 </span>
          </button>
        </nav>
    </div>
  
    <script>
      $(document).foundation();
    </script>
</body>
</html>

Producción:

Ejemplo 2: El siguiente código demuestra el contenido de la diapositiva de la órbita CSS de la Fundación .

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
  <title> Foundation CSS Orbit </title>
  <!-- Compressed CSS -->
  <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" >
  
  <!-- Compressed JavaScript -->
  <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
  </script>
  <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
  </script>
</head>
  
<body>
   <center>
    <h2 style="color:green;">  GeeksforGeeks </h2> 
    <strong>  Foundation CSS Orbit</strong> 
   </center>
  
   <div class="orbit" role="region" data-orbit data-use-m-u-i="false">
        <ul class="orbit-container">
          <button class="orbit-previous" aria-label="previous">
            <span class="show-for-sr"> Previous </span>
            ◀
          </button>
          <button class="orbit-next"  aria-label="next"> 
            <span class="show-for-sr"> Next </span>
            ▶
          </button>
  
          <li class="is-active orbit-slide">
            <h3 class="text-center"> GFG slide 1 </h3>
            <figure class="orbit-image text-center">
              <img src=
    "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" >
            </figure>
          </li>
  
          <li class="orbit-slide">
            <h3 class="text-center"> GFG slide 2 </h3>
            <figure class="orbit-image text-center">
              <img src=
    "https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png" >
            </figure>
          </li>
  
          <li class="orbit-slide">
            <h3 class="text-center"> GFG slide 3 </h3>
            <figure class="orbit-image text-center">
              <img src=
    "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200617163105/gfg-logo.png" >
            </figure>
          </li>
        </ul>
  
        <nav class="orbit-bullets">
          <button class="is-active" data-slide="0">
            <span class="show-for-sr"> GFG slide 1 </span>
            <span class="show-for-sr"> Current Slide </span> 
          </button>
  
          <button data-slide="1"> 
            <span class="show-for-sr"> GFG slide 2 </span>
          </button>
  
          <button data-slide="2"> 
            <span class="show-for-sr"> GFG slide 3 </span>
          </button>
        </nav>
    </div>
  
     <script>
        $(document).foundation();
     </script>
</body>
</html>

Producción:

Referencia: https://get.foundation/sites/docs/orbit.html

Publicación traducida automáticamente

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