Teach with us

Foundation - Orbit

Previous Page
Next Page  

Description

Orbit is an easy and powerful slider that swipes the elements using the orbit class.

Example

The following example demonstrates the use of orbit in Foundation −

Live Demo 
<html>
   <head>
      <title>Orbit</title>

      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">

      <!-- 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.5.1/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script>

      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.1.1/motion-ui.css">

      <script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js"></script>
   </head>

   <body>
      <h2 class = "text-center">Orbit Example</h2>

      <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 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">
               <div>
                  <h3 class = "text-center">This is your first slider</h3>
                  <p class = "text-center">Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. </p>
               </div>
            </li>

            <li class = "orbit-slide">
               <div>
                  <h3 class = "text-center">This is your second slider</h3>
                  <p class = "text-center">Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. </p>
               </div>
            </li>

            <li class = "orbit-slide">
               <div>
                  <h3 class = "text-center">This is your third slider</h3>
                  <p class = "text-center">Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. </p>
               </div>
            </li>

            <li class = "orbit-slide">
               <div>
                  <h3 class = "text-center">This is your fourth slider</h3>
                  <p class = "text-center">Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. </p>
               </div>
            </li>
         </ul>

         <nav class = "orbit-bullets">
            <button class = "is-active" data-slide = "0">
               <span class = "show-for-sr">First slide</span>
               <span class = "show-for-sr">Current Slide</span>
            </button>

            <button data-slide = "1">
               <span class = "show-for-sr">Second slide</span>
            </button>

            <button data-slide = "2">
               <span class = "show-for-sr">Third slide</span>
            </button>

            <button data-slide = "3">
               <span class = "show-for-sr">Fourth slide</span>
            </button>
         </nav>
      </div>

      <script>
         $(document).ready(function() {
            $(document).foundation();
         })
      </script>
   </body>
</html>

Output

Let us carry out the following steps to see how the above given code works −

  • Save the above given html code orbit.html file.

  • Open this HTML file in a browser, an output is displayed as shown below.

foundation_kitchen_sink.htm
Previous Page Print Page Next Page  
Advertisements