Foundation CSS Orbit Using Animation

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.

Output:

👁 Image

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.

Output:
 

👁 Image

Reference: https://get.foundation/sites/docs/orbit.html#using-animation