--- title: Orbit description: An image and content carousel with animation support and many customizable options. sass: scss/components/_orbit.scss js: js/foundation.orbit.js mui: true video: l0bdHvBuylA tags: - slider - carousel --- ## Basics Orbit doesn't automatically generate any HTML for you, giving you the flexibility to move around the various pieces of the plugin. Here's a complete example—we'll break down the individual pieces farther down.

Please note that apart from Javascript, Motion UI is a dependency for Orbit to work properly. If in case, you don't want any animations within your Carousel, you can always disable the animation.

Watch this part in video

edit on codepen button
```html
```
--- ### Wrapper The wrapper houses the entire carousel. We use the `aria-label` attribute to label what the carousel is, for assistive technology. ```html
``` ### Slide Container The slide container houses each individual slide. In our above markup example, we also placed the buttons in here, so we can anchor them to the center edge of the slide container. However, they can be moved anywhere within the `data-orbit` wrapper. Each slide is an `
  • ` with the class `.orbit-slide`. The first slide is marked with the `.is-active` class to indicate it's the default. You can place any HTML you want inside of the slide, but we have some premade styles for image-based slides with a caption. ```html ``` ### Next/Previous Arrows Orbit controls use the class `.orbit-previous` and `.orbit-next`. The below example has an important accessibility hook: since we're using ASCII arrows for the carousel controls, we add screen reader-only text (wrapped in the class `.show-for-sr`) that explain what the controls do. ```html ``` ### Bullets The bullets serve two purposes: they mark the current slide, and can be clicked on to navigate to another slide. Like with the controls, the bullets also have screen reader-friendly labels. ```html ``` --- ## Slide Contents A carousel slide can contain images or HTML—you can even mix between slides in one carousel!

    Watch this part in video

    edit on codepen button
    ```html

  • 2: You can also throw some text in here!

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.

    This Orbit slider does not use animations.

    • ```
    --- ## Using Animation Orbit uses [Motion UI](motion-ui.html) CSS classes to animate slides around.

    Without the inclusion of the `motion-ui` [Motion UI](motion-ui.html) CSS file in your template, Orbit slider fails to work properly.

    There are four plugin options you can set to change the default effects: - `data-anim-in-from-left`: transition to play when a slide comes *in from the left*. - `data-anim-in-from-right`: transition to play when a slide comes *in from the right*. - `data-anim-out-to-left`: transition to play when a slide comes *out to the left*. - `data-anim-out-to-right`: transition to play when a slide comes *out to the right*. Since those option names are pretty *long*, you can also set them all in one HTML attribute, using `data-options`:
    edit on codepen button
    ```html
    ```
    --- ### Disabling Animation To disable Motion UI, set the plugin option `useMUI` to `false`. Written as an HTML attribute, that's `data-use-m-u-i="false"`.
    edit on codepen button
    ```html
    ```