# Transitions

```markup
<script>
    jQuery(document).ready(function($) {
        $("#slider-wrapper").transitionSlider({
            slides: [
                {
                    // example with "roll" transition
                    src: "assets/1.mp4",
                    transitionEffect: "roll",
                    brightness: "fade",
                    easing:"fast",
                    transitionDuration: 2000,
                    distance: "long",
                }
            ]
        );
    });
</script>
```

| Parameter            | Type     | Default  | Description                                                                                                                                                                                                                                               |
| -------------------- | -------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `transitionEffect`   | `string` | `"roll"` | Transition effect for current slide, will be visible when you move from current slide to next one. Transition is only applied on slide background (image or video). (Values: `"roll", "stretch", "warp", "zoom", "powerzoom", "flash", "fade", "twirl"`). |
| `transitionDuration` | `number` | `1000`   | Duration of transition effect for current slide. (Value is in `ms`).                                                                                                                                                                                      |

**Each transition effect has some specific parameters only related for that effect. Below is list of effects and related parameters.**

|               |          |   |                                                                                                                                                                                                                                                                                                                               |
| ------------- | -------- | - | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Roll**      |          |   |                                                                                                                                                                                                                                                                                                                               |
| `direction`   | `string` |   | Transition effect direction. If not set direction is random. (Directions: `"top", "bottom", "left", "right", "topleft", "topright", "bottomleft", "bottomright"`).                                                                                                                                                            |
| `brightness`  | `string` |   | Brightness is fade effect added to transition. Bright flash effect `"flash"`, and dark fade out effect `"fade"`. Without this parameter flash or fade effect won’t be added.                                                                                                                                                  |
| `distance`    | `string` |   | Distance is a parameter which controls how stretched transition effect will be. Really short transition effect is defined with `"short"`, and long and stretched effect is defined with `"long"`. Without this parameter `distance` will be between `"short"` and `"long"`.                                                   |
| `easing`      | `string` |   | Easing is a parameter that controls the motion timing of the transition effect. Without this parameter timing of transition during effect will be evenly distributed. For transition with slower start put `"slow"`, or transition with bounce effect at the end put `"elastic"`.                                             |
| **Stretch**   |          |   |                                                                                                                                                                                                                                                                                                                               |
| `direction`   | `string` |   | Transition effect direction. If not set direction is random. (Directions: `"top", "bottom", "left", "right"`                                                                                                                                                                                                                  |
| `brightness`  | `string` |   | Brightness is fade effect added to transition. Bright flash effect `"flash"`, and dark fade out effect `"fade"`. Without this parameter flash or fade effect won’t be added.                                                                                                                                                  |
| `distance`    | `string` |   | Distance is a parameter which controls how stretched transition effect will be. Really short transition effect is defined with `"short"`, and long and stretched effect is defined with `"long"`. Without this parameter `distance` will be between `"short"` and `"long"`.                                                   |
| `easing`      | `string` |   | Easing is a parameter that controls the motion timing of the transition effect. Without this parameter timing of transition during effect will be evenly distributed. For transition with slower start put `"slow"`, or transition with bounce effect at the end put `"elastic"`.                                             |
| **Warp**      |          |   |                                                                                                                                                                                                                                                                                                                               |
| `direction`   | `string` |   | Transition effect direction. If not set direction is random. (Directions: `"top", "bottom", "left", "right"`                                                                                                                                                                                                                  |
| `brightness`  | `string` |   | Brightness is fade effect added to transition. Bright flash effect `"flash"`, and dark fade out effect `"fade"`. Without this parameter flash or fade effect won’t be added.                                                                                                                                                  |
| `distance`    | `string` |   | Distance is a parameter which controls how stretched transition effect will be. Really short transition effect is defined with `"short"`, and long and stretched effect is defined with `"long"`. Without this parameter `distance` will be between `"short"` and `"long"`.                                                   |
| `easing`      | `string` |   | Easing is a parameter that controls the motion timing of the transition effect. Without this parameter timing of transition during effect will be evenly distributed. For transition with slower start put `"slow"`, or transition with bounce effect at the end put `"elastic"`.                                             |
| **Zoom**      |          |   |                                                                                                                                                                                                                                                                                                                               |
| `direction`   | `string` |   | Transition effect direction. If not set direction is random. (Directions: `"in", "out"`)                                                                                                                                                                                                                                      |
| `brightness`  | `string` |   | Brightness is fade effect added to transition. Bright flash effect `"flash"`, and dark fade out effect `"fade"`. Without this parameter flash or fade effect won’t be added.                                                                                                                                                  |
| `distance`    | `string` |   | Distance is a parameter which controls how stretched transition effect will be. Really short transition effect is defined with `"short"`, and long and stretched effect is defined with `"long"`. Without this parameter `distance` will be between `"short"` and `"long"`.                                                   |
| `easing`      | `string` |   | Easing is a parameter that controls the motion timing of the transition effect. Without this parameter timing of transition during effect will be evenly distributed. For transition with slower start put `"slow"`, or transition with bounce effect at the end put `"elastic"`.                                             |
| **Powerzoom** |          |   |                                                                                                                                                                                                                                                                                                                               |
| `direction`   | `string` |   | Transition effect direction. If not set direction is random. (Directions: `"in", "out"`                                                                                                                                                                                                                                       |
| `brightness`  | `string` |   | Brightness is fade effect added to transition. Bright flash effect `"flash"`, and dark fade out effect `"fade"`. Without this parameter flash or fade effect won’t be added.                                                                                                                                                  |
| `easing`      | `string` |   | Easing is a parameter that controls the motion timing of the transition effect. Without this parameter timing of transition during effect will be evenly distributed. For transition with slower start put `"slow"`, or transition with faster effect put `"fast"`.                                                           |
| **Flash**     |          |   |                                                                                                                                                                                                                                                                                                                               |
| `easing`      | `string` |   | Easing is a parameter that controls the motion timing of the transition effect. Without this parameter timing of transition during effect will be evenly distributed. For transition with slower start put `"slow"`, transition with faster effect put `"fast"`, or transition with bounce effect at the end put `"elastic"`. |
| **Fade**      |          |   |                                                                                                                                                                                                                                                                                                                               |
| `easing`      | `string` |   | Easing is a parameter that controls the motion timing of the transition effect. Without this parameter timing of transition during effect will be evenly distributed. For transition with slower start put `"slow"`, transition with faster effect put `"fast"`, or transition with bounce effect at the end put `"elastic"`. |