Foundation CSS Orbit

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.

Output:

👁 Image

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

Output:

👁 Image

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