Foundation CSS Orbit Slide Contents - Coding

Foundation CSS is the frontend framework of CSS that is used to build responsive websites, apps, and emails that work perfectly on any device. It is written using HTML, CSS, and Javascript and is used by many famous companies like Amazon, Facebook, eBay, etc. It uses packages like Grunt and Lib sass for fast coding and controlling and SaaS compiler to make development faster. 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. In this article, we will discuss Foundation CSS Orbit Slide Contents.

Foundation CSS Orbit Slide Contents Class:

orbit-slide: This class is used to create the slider to slide the content.

Syntax:

<li class="orbit-slide">
   ....
</li>

Example 1: This example describes the Foundation CSS Orbit Slide Contents.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> Foundation CSS Orbit Slide Contents </title> 
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css"
        crossorigin="anonymous"> 
  
    <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/[email protected]/dist/js/foundation.min.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h2 style="color: green;"> 
            GeeksforGeeks 
        </h2> 
        <strong> 
            Foundation CSS Orbit Slide Contents 
        </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"> 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"> GeeksforGeeks 2 </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"> GeeksforGeeks 3 </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">GeeksforGeeks 1</span> 
                <span class="show-for-sr">Current Slide</span> 
            </button> 
            <button data-slide="1"> 
                <span class="show-for-sr">GeeksforGeeks 2</span> 
            </button> 
            <button data-slide="2"> 
                <span class="show-for-sr">GeeksforGeeks 3</span> 
            </button> 
        </nav> 
    </div> 
    <script> 
        $(document).ready(function () { 
            $(document).foundation(); 
        }) 
    </script> 
</body> 
  
</html> 

Output:

Example 2: This example describes the Foundation CSS Orbit Slide Contents with images.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
  <title> Foundation CSS Orbit Slide Contents </title> 
  <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" 
      crossorigin="anonymous"> 
  
  <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/[email protected]/dist/js/foundation.min.js"> 
  </script> 
</head> 
  
<body> 
  <center> 
    <h2 style="color: green;"> 
        GeeksforGeeks 
    </h2>  
    <strong> 
      Foundation CSS Orbit Slide Contents 
    </strong>  
  
    <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"> GeeksforGeeks 1 </h3> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png" > 
          </div> 
        </li> 
  
        <li class="orbit-slide"> 
          <div> 
            <h3 class="text-center"> GeeksforGeeks 2 </h3> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" > 
          </div> 
        </li> 
  
        <li class="orbit-slide"> 
          <div> 
            <h3 class="text-center"> GeeksforGeeks 3 </h3> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200617163105/gfg-logo.png" > 
          </div> 
        </li> 
      </ul> 
  
      <nav class="orbit-bullets"> 
        <button class="is-active" 
                data-slide="0"> 
          <span class="show-for-sr">GeeksforGeeks 1</span> 
          <span class="show-for-sr">Current Slide</span>  
        </button> 
        <button data-slide="1">  
          <span class="show-for-sr">GeeksforGeeks 2</span> 
        </button> 
        <button data-slide="2">  
          <span class="show-for-sr">GeeksforGeeks 3</span> 
        </button> 
      </nav> 
    </div> 
  </center> 
  <script> 
    $(document).ready(function() { 
      $(document).foundation(); 
    }) 
  </script> 
</body> 
</html>

Output:

Reference: https://get.foundation/sites/docs/orbit.html#slide-contents

Reffered: https://www.geeksforgeeks.org

CSS

Related
Semantic-UI Breadcrumb Link Content
Foundation CSS Kitchen Sink Grid
Semantic-UI List Ordered Type
Semantic-UI Responsive Grids
Foundation CSS Kitchen Sink Responsive Embed

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	9