Foundation CSS Orbit Using Animation

Last Updated : 29 Jun, 2022

Foundation CSS is an open-source front-end framework that makes it simple and quick to create an appealing responsive website, email, or app. ZURB released it in September 2011. Numerous businesses, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. This platform, which resembles SaaS, is built on the Bootstrap framework. It is more unique, flexible, and complex. Because of its command-line interface, dealing with module bundlers is likewise a joy. Email framework creates HTML emails that are accessible on all devices and mobile-friendly. Using Foundation for Apps, you can make fully responsive web applications.

Foundation CSS Orbit is used to create the slider that can swipe the elements using the orbit class. We can store any type of content in the slider such as text, images, etc.

Foundation CSS Orbit Using Animation Classes:

orbit: This class is added to create the basic orbit.
orbit-container: This class is added to build an orbit container.
orbit-wrapper: This class is added to wrap the whole orbit container leaving the bottom bullets.
orbit-controls: This class is added to the buttons that will control the slides of the orbit.
orbit-image: This class is added to insert an image in the slide.
orbit-previous: This class is added to traverse the previous slide.
orbit-next: This class is added to move to the next slide.
orbit-slide: This is used to create a slide in the orbit container.

Foundation CSS Orbit Using Animation Attributes:

data-orbit: This attribute th
data-options:
data-slide:

Example 1: The code below demonstrates how to make a basic slider with text-only with slide-in-left, slide-in-right, slide-out-left, and slide-out-right as values of the data-options attribute.

HTML

<!DOCTYPE html> 
<html> 
  <head> 
    <link rel="stylesheet"
href= 
 "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"/> 
    <link rel="stylesheet"
href= 
 "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css"/> 
    <link rel="stylesheet"
href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css"/> 
    <link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.2.1/motion-ui.min.css"/> 
    <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.5.1/dist/js/foundation.min.js"> 
    </script> 
    <script src= 
 "https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.2.1/motion-ui.min.js"> 
    </script> 
  </head> 
  
<body> 
    <center> 
      <h1 style="color: green">GeeksforGeeks</h1> 
      <h3>Foundation CSS Orbit Using Animation</h3> 
    </center> 
  
    <div class="row float-center " style="width: 38rem; margin-top: 2rem;"> 
      <div class="columns"> 
        <div class="orbit" role="region" aria-label="" data-orbit 
          data-options= 
     "animInFromLeft:slide-in-left; animInFromRight:slide-in-right;  
      animOutToLeft:slide-out-left; animOutToRight:slide-out-right;"> 
          <ul class="orbit-container"> 
            <button class="orbit-previous" aria-label="previous"> 
              <span class="show-for-sr">Previous Slide</span>◀ 
            </button> 
            <button class="orbit-next" aria-label="next"> 
              <span class="show-for-sr">Next Slide</span>▶ 
            </button> 
            <li class="is-active orbit-slide" style=""> 
                <div> 
                    <h3 class="text-center"> GeeksforGeeks 1 </h3> 
                    <p class="text-center"> 
                        A Computer Science portal for geeks. 
                    </p> 
  
    
                </div> 
            </li> 
            <li class="orbit-slide"> 
                <div> 
                    <h3 class="text-center"> This is the 2nd slide </h3> 
                    <p class="text-center"> 
                        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">3rd slide faded in from right</h3> 
                    <p class="text-center"> 
                        Computer Science portal 
                    </p> 
  
    
                </div> 
            </li> 
          </ul> 
          <nav class="orbit-bullets"> 
            <button class="is-active" data-slide="0"> 
              <span class="show-for-sr">First slide details.</span
              ><span class="show-for-sr">Current Slide</span> 
            </button> 
            <button data-slide="1"> 
              <span class="show-for-sr">Second slide details.</span> 
            </button> 
            <button data-slide="2"> 
              <span class="show-for-sr">Third slide details.</span> 
            </button> 
          </nav> 
        </div> 
      </div> 
    </div> 
  
    <script> 
      $(document).ready(function () { 
        $(document).foundation(); 
      }); 
    </script> 
</body> 
</html>

Output:

Example 2: The code below demonstrates how to make a basic slider with images with fade-in, fade-in, fade-out, and fade-out as values of the data-options attribute.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" /> 
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css"> 
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css"> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.2.1/motion-ui.min.css" /> 
    <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.5.1/dist/js/foundation.min.js"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.2.1/motion-ui.min.js"> 
    </script> 
</head> 
  
<body>   
    <center> 
        <h1 style="color: green">GeeksforGeeks</h1> 
        <h3>Foundation CSS Orbit Using Animation</h3> 
    </center> 
  
      <div class="row float-center" style="width: 38rem;"> 
        <div class="columns"> 
          <div class="orbit" role="region" aria-label="" 
               data-orbit data-options="animInFromLeft:fade-in; 
               animInFromRight:fade-in; animOutToLeft:fade-out;  
                                        animOutToRight:fade-out;"> 
            <ul class="orbit-container"> 
              <button class="orbit-previous" aria-label="previous"> 
                <span class="show-for-sr">Previous Slide</span>◀</button> 
              <button class="orbit-next" aria-label="next"><span
                    class="show-for-sr">Next Slide</span>▶</button> 
              <li class="is-active orbit-slide"> 
                <img class="orbit-image" src="1.png" alt=""> 
                <figcaption class="orbit-caption">First Slide</figcaption> 
              </li> 
              <li class="orbit-slide"> 
                <img class="orbit-image" src="2.png" alt=""> 
                <figcaption class="orbit-caption">second slide</figcaption> 
              </li> 
              <li class="orbit-slide"> 
                <img class="orbit-image" src="3.png" alt=""> 
                <figcaption class="orbit-caption">Third Slide</figcaption> 
              </li> 
            </ul> 
            <nav class="orbit-bullets"> 
             <button class="is-active" data-slide="0"><span 
                     class="show-for-sr">First slide details.</span> 
               <span class="show-for-sr">Current Slide</span></button> 
             <button data-slide="1"><span class="show-for-sr"> 
                  Second slide details.</span></button> 
             <button data-slide="2"><span class="show-for-sr"> 
               Third slide details.</span></button> 
           </nav> 
          </div> 
        </div> 
      </div> 
        
    <script> 
        $(document).ready(function () { 
            $(document).foundation(); 
        }); 
    </script> 
</body> 
  
</html>