From f7206813b0a151111b7add63cb19273e97d22604 Mon Sep 17 00:00:00 2001 From: Chris Oyler Date: Mon, 14 Dec 2015 11:17:49 -0800 Subject: [PATCH] updates orbit docs page, adds animation-free example as well as changing default motion-ui animation. --- docs/pages/orbit.md | 66 +++++++++++++++++++++++++++++++++++++-------- 1 file changed, 55 insertions(+), 11 deletions(-) diff --git a/docs/pages/orbit.md b/docs/pages/orbit.md index cc1e5b6c5..ec6a3f8a2 100644 --- a/docs/pages/orbit.md +++ b/docs/pages/orbit.md @@ -10,8 +10,17 @@ tags: --- ## Basic Orbit Slider +

+ The new Orbit slider was designed to be a tool for rapid prototyping. While you are welcome to use it in production, if you want something more robust, we welcome you to try [Owl Carousel](http://owlgraphic.com/owlcarousel/). +

+
+

+ If animations are desired with the Orbit slider, such as the example below, [Motion-UI](https://github.com/zurb/motion-ui) is required. If you want a simple slide replacement, set the option `useMUI` to false for animation free slides. +

+
+
-
+
    @@ -41,36 +50,36 @@ tags:
```html_example -
+
  • -

    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 slide has chill

    +

    1: You can also throw some text in here!

    +

    Achieve an animation-free Orbit with the data attribute data-use-m-u-i="false"

    +

    This Orbit slider does not use animations.

  • -

    You can also throw some text in here!

    +

    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 slide has chill

    +

    This Orbit slider does not use animations.

  • -

    You can also throw some text in here!

    +

    3: 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 slide has chill

    +

    This Orbit slider does not use animations.

  • -

    You can also throw some text in here!

    +

    4: 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 slide has chill

    +

    This Orbit slider does not use animations.

@@ -82,3 +91,38 @@ tags:
``` + +## Changing Default Animations + +

+ This example uses Motion-UI's fade-[in/out] animations to change slides, instead of the default slide-[left/right]. This is achieved with setting the animation options with the `data-options` attribute: `data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;"` +

+
+
+
    + + +
  • + Space +
    Space, the final frontier.
    +
    • +
  • + Space +
    Lets Rocket!
    +
    • +
  • + Space +
    Encapsulating
    +
    • +
  • + Space +
    Outta This World
    +
    • +
+ +
-- 2.47.2