Foundation CSS Orbit

Last Updated : 23 Mar, 2022

Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. The framework is based on bootstrap, which is similar to SaaS. It’s more complex, versatile, and configurable. It also comes with a command-line interface, making it simple to use with module bundlers. Email framework provides you with responsive HTML emails, which can be read on any device. Foundation for Apps allows you to build fully responsive web applications.

Foundation CSS Orbit is used to create the slider that swipes the elements using the orbit class. We can put any type of content inside the slides.

In this article, we will discuss Orbit in Foundation CSS.

Foundation CSS Orbit Topics:

Basics: We will create the basic orbit.
Slide Contents: We will create the slider to slide the content using some classes.

Foundation CSS Orbit Classes:

orbit: This class is used to create the basic orbit.
orbit-container: This class is used to create an orbit container.
orbit-wrapper: This class is used to wrap the orbit container.
orbit-controls: this class is used to control the orbit using buttons.
orbit-image: This class is used to insert an image in the container.
orbit-previous: This class is used to navigate to the previous slide.
orbit-next: This class is used to navigate to the next slide.
orbit-slide: This is used to create an orbit container slide.

Syntax:

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

Example 1: The following code demonstrates the Foundation CSS Orbit Basics.

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>

Output:

Example 2: The following code demonstrates the Foundation CSS Orbit Slide Contents.

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>