Merge pull request express-labs#68 from express-labs/feature/ability-…

…to-change-animation

Feature/ability to change animation

README.md

@@ -197,8 +197,11 @@ A Slider is a viewport that masks slides.  The Slider component must wrap one or
 
 | property | type | default | required | purpose |
 | -------- | ---- | ------- | -------- | ------- |
-| **children** | [string|node] | | **Yes** | Children is a special React property.  Basically, the CarouselProvider needs to wrap other components and/or JSX |
+| **children** | [string|node] | | **Yes** | Children is a special React property.  Basically, the Slider needs to wrap other components and/or JSX |
 | className | [string|null] | null | No | Optional className string that will be appended to the component's className string. |
+| classNameAnimation| [string|null] | null | No |Optional className string. The slider uses the css transform property, applying translateX to move the slider tray east and west for a horizontal slider, and translateY to move the slider north and south for a vertical slider.   The actual animation is the result of applying a CSS3 transition effect.  If you supply your own classNameAnimation class, the default transition is disabled and ONLY the transitions specified by the classNameAnimation class are applied. Learn more about [CSS3 transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions). |
+| classNameTray | [string|null] | null | No | Optional className string that is applied to the Slider's tray. The "tray" is the DOM element that contains the slides. The type of DOM element is specified by the trayTag property |
+| classNameTrayWrap | [string|null] | null | No | Optional className string that is applied to a div that surrounds the Slider's tray |
 | style | object | {} | No | Optional css styles to add to the Slider.  Note: internal css properties take precedence over any styles specified in the styles object |
 | trayTag | string | 'ul' | No | The HTML tag to used for the tray (the thing that holds all the slides and moves the slides back and forth.) |  
 | onMasterSpinner | [function|null] | null | No | Optional callback function that is called when the Master Spinner is visible.  Requires that <CarouselProvider /> set hasMasterSpinner to true |
@@ -207,8 +210,8 @@ A Slider is a viewport that masks slides.  The Slider component must wrap one or
 
 ```HTML
 <div class="carousel__slider [carousel__slider--vertical|carousel__slider--horizontal] [props.className]" aria-live="polite" style="[props.style]" ...props>
-  <div class="carousel__slider-tray-wrapper [carousel__slider-tray-wrap--vertical|carousel__slider-tray-wrap--horizontal]">
-    <props.trayTag|ul class="carousel__slider-tray [carousel__slider-tray--vertical|carousel__slider-tray--horizontal]">
+  <div class="carousel__slider-tray-wrapper [carousel__slider-tray-wrap--vertical|carousel__slider-tray-wrap--horizontal][props.classNameTrayWrap]">
+    <props.trayTag|ul class="carousel__slider-tray [props.classNameAnimation] [carousel__slider-tray--vertical|carousel__slider-tray--horizontal] [props.classNameTray]">
       [props.children]
     </props.trayTag|ul>
     <div class="carousel__master-spinner-container">
@@ -218,6 +221,13 @@ A Slider is a viewport that masks slides.  The Slider component must wrap one or
 </div>
 ```
 
+#### How to Change the Default Transition Animation
+
+- Read the documentation for the classNameAnimation property on the Slider component.
+- Read about [CSS3 transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions).
+- Create your own CSS class that uses a CSS3 transition.
+- Pass the CSS class you create to the classNameAnimation property of Slider.
+
 ### &lt;Slide />
 The Slide component is a container with an intrinsic ratio computed by the CarouselProvider naturalSlideWidth and naturalSlideHeight properties.  By default, only one slide is visible in the Slider at a time.  You can change this by altering the visibleSlides property of the CarouselProvider.  Slide components also contain a div that acts as an aria compliant focus ring when the Slide receives focus either by using a keyboard tab, mouse click, or touch.
 
@@ -247,7 +257,7 @@ A Dot component is a HTML button.  Dots directly correlate to slides.  Clicking
 
 | property | type | default | required | purpose |
 | -------- | ---- | ------- | -------- | ------- |
-| **children** | [string&#124;node] | | **Yes** | Children is a special React property.  Basically, the CarouselProvider needs to wrap other components and/or JSX |
+| **children** | [string&#124;node] | | **Yes** | Children is a special React property.  Basically, the Dot component needs to wrap other components and/or JSX |
 | className | [string&#124;null] | null | No | Optional className string that will be appended to the component's className string. |
 | disabled | [boolean&#124;null] | null | No | Null means Dot will automatically determine if this button is disabled. Setting this to true will force the button to be disabled.  Setting this to false will prevent the button from ever being disabled. |
 | onClick | [function&#124;null] | null | No | Optional callback function that is called after the internal onClick function is called. It is passed the React synthetic event |
@@ -303,7 +313,7 @@ A button for moving the slider backwards. Backwards on a horizontal carousel mea
 
 | property | type | default | required | purpose |
 | -------- | ---- | ------- | -------- | ------- |
-| **children** | [string&#124;node] | | **Yes** | Children is a special React property.  Basically, the CarouselProvider needs to wrap other components and/or JSX |
+| **children** | [string&#124;node] | | **Yes** | Children is a special React property.  Basically, the ButtonnBack component needs to wrap other components and/or JSX |
 | className | [string&#124;null] | null | No | Optional className string that will be appended to the component's className string. |
 | disabled | [boolean&#124;null] | null | No | Null means ButtonBack will automatically determine if this button is disabled. Setting this to true will force the button to be disabled.  Setting this to false will prevent the button from ever being disabled. |
 | onClick | [function&#124;null] | null | No | Optional callback function that is called after the internal onClick function is called. It is passed the React synthetic event |
@@ -321,7 +331,7 @@ A button for moving the slider forwards. Forwards on a horizontal carousel means
 
 | property | type | default | required | purpose |
 | -------- | ---- | ------- | -------- | ------- |
-| **children** | [string&#124;node] | | **Yes** | Children is a special React property.  Basically, the CarouselProvider needs to wrap other components and/or JSX |
+| **children** | [string&#124;node] | | **Yes** | Children is a special React property.  Basically, the ButtonNext component needs to wrap other components and/or JSX |
 | className | [string&#124;null] | null | No | Optional className string that will be appended to the component's className string. |
 | disabled | [boolean&#124;null] | null | No | Null means ButtonNext will automatically determine if this button is disabled. Setting this to true will force the button to be disabled.  Setting this to false will prevent the button from ever being disabled. |
 | onClick | [function&#124;null] | null | No | Optional callback function that is called after the internal onClick function is called. It is passed the React synthetic event |
@@ -339,7 +349,7 @@ Moves the slider to the beginning of the slides.
 
 | property | type | default | required | purpose |
 | -------- | ---- | ------- | -------- | ------- |
-| **children** | [string&#124;node] | | **Yes** | Children is a special React property.  Basically, the CarouselProvider needs to wrap other components and/or JSX |
+| **children** | [string&#124;node] | | **Yes** | Children is a special React property.  Basically, the ButtonFirst component needs to wrap other components and/or JSX |
 | className | [string&#124;null] | null | No | Optional className string that will be appended to the component's className string. |
 | disabled | [boolean&#124;null] | null | No | Null means ButtonFirst will automatically determine if this button is disabled. Setting this to true will force the button to be disabled.  Setting this to false will prevent the button from ever being disabled. |
 | onClick | [function&#124;null] | null | No | Optional callback function that is called after the internal onClick function is called. It is passed the React synthetic event |
@@ -357,7 +367,7 @@ Moves the slider to the end of the slides (totalSlides - visibleSlides).
 
 | property | type | default | required | purpose |
 | -------- | ---- | ------- | -------- | ------- |
-| **children** | [string&#124;node] | | **Yes** | Children is a special React property.  Basically, the CarouselProvider needs to wrap other components and/or JSX |
+| **children** | [string&#124;node] | | **Yes** | Children is a special React property.  Basically, the ButtonLast component needs to wrap other components and/or JSX |
 | className | [string&#124;null] | null | No | Optional className string that will be appended to the component's className string. |
 | disabled | [boolean&#124;null] | null | No | Null means ButtonLast will automatically determine if this button is disabled. Setting this to true will force the button to be disabled.  Setting this to false will prevent the button from ever being disabled. |
 | onClick | [function&#124;null] | null | No | Optional callback function that is called after the internal onClick function is called. It is passed the React synthetic event |