Foundation CSS Orbit

The Orbit component in Foundation CSS allows you to create responsive, touch-enabled sliders or carousels for showcasing images, videos, or other content in a visually appealing manner. With Orbit, you can easily create dynamic slideshows with smooth transitions and navigation controls. Here's how you can use the Orbit component:

1. Basic Orbit Slider

To create a basic Orbit slider, you need to structure your HTML markup with a container element for the slider and individual slide elements nested inside it. Each slide can contain an image, video, or other content.

Example markup:

<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
  <div class="orbit-wrapper">
    <div class="orbit-controls">
      <button class="orbit-previous">Previous</button>
      <button class="orbit-next">Next</button>
    </div>
    <ul class="orbit-container">
      <li class="is-active"><img src="path/to/image1.jpg" alt="Space"></li>
      <li><img src="path/to/image2.jpg" alt="Space"></li>
      <li><img src="path/to/image3.jpg" alt="Space"></li>
    </ul>
  </div>
</div>

This will create a basic Orbit slider with three slides containing images.

2. Adding Navigation Controls

Orbit provides built-in navigation controls for navigating between slides. You can use the orbit-previous and orbit-next buttons to move to the previous or next slide.

Example markup:

<div class="orbit-controls">
  <button class="orbit-previous">Previous</button>
  <button class="orbit-next">Next</button>
</div>

These buttons will allow users to navigate through the slides.

3. Autoplay and Timer

You can enable autoplay for the Orbit slider, which automatically transitions between slides at a specified interval. Additionally, you can set a timer that displays a progress bar indicating the time remaining for each slide.

Example markup with autoplay and timer:

<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-auto-play="true" data-timer-delay="5000">
  ...
</div>

This will enable autoplay with a 5-second delay between slides and display a timer.

4. Customization and Styling

You can customize the appearance and behavior of the Orbit slider using Foundation CSS classes and custom CSS. Foundation CSS provides classes for styling various aspects of the slider, such as slides, navigation controls, and the timer.

Example CSS:

.orbit-container {
  background-color: #f0f0f0;
  border-radius: 10px;
}

.orbit-slide img {
  max-width: 100%;
  height: auto;
}

This CSS will style the container background and ensure that slide images are responsive.

Conclusion

The Orbit component in Foundation CSS provides a versatile solution for creating responsive sliders or carousels to showcase images, videos, or other content. Whether you need a basic slider or want to add advanced features like autoplay and custom styling, Orbit offers the flexibility and functionality to meet your design requirements and enhance the user experience.

Archive