Using Options
Using Options
The Evo Slider options covers most of the slider customizations you will need for each implementation. There are numerous options that can be added to configure the look and behaviour of the Evo Slider.
To add an option to the slider you add it to the initialisation block of code, like so:
$('#evoslider').evoSlider({
width: 960,
height: 360,
autoplay: true
});
List of Options
| Name | Type | Default | Version | Description |
|---|---|---|---|---|
| addLinkToImage | Boolean | true | Pro | Allows you to add link to image. |
| addLinkToTitle | Boolean | true | Pro | Allows you to add link to title. |
| after | Function | function(){} | Pro | Callback function to run after slide transition. |
| autoHideText | Boolean | false | Pro | Overlay text description auto hide if slide not on hover. |
| autoplay | Boolean | true | Pro, Lite | Sets Evo Slider to play slideshow when initialized |
| before | Function | function(){} | Pro | Callback function to run before slide transition. |
| classBtnNext | String | "evo_next" | Pro | The CSS class used for the next button. |
| classBtnPrev | String | "evo_prev" | Pro | The CSS class used for the previous button. |
| classExtLink | String | "evo_link" | Pro | The CSS class used for the external slide-links. |
| controlNav | Boolean | true | Pro | Enables control navigation. |
| controlNavAutoHide | Boolean | false | Pro | Auto hides control navigation on hover. |
| controlNavMode | String | "bullets" | Pro | Sets control navigation mode: "bullets", "thumbnails", or "rotator". |
| controlNavPosition | String | "inside" | Pro | Sets control navigation position: "inside" or "outside". |
| controlNavVertical | Boolean | false | Pro | Sets control navigation to display vertically. |
| controlNavVerticalAlign | String | "right" | Pro | Sets the position of the vertical outside control: "left" or "right". |
| controlSpace | Number | 5 | Pro | The space in pixels (px) between outside control and slide. |
| customIndex | Array | [] | Pro | Sets the custom index of the title bar and bullets control. |
| dailymotion | Object | { autoplay: 0, logo: 0, foreground: "%23F7FFFD", background: "%23FFC300", highlight: "%23171D1B", info: 1 } | Pro | Customize the Dailymotion player. |
| directionNav | Boolean | true | Pro | Enables directional navigation/arrows button (prev and next). |
| directionNavAutoHide | Boolean | false | Pro | Sets directional navigation to auto hide on hover. |
| easing | String | "swing" | Pro, Lite | A string indicating which easing function to use for the transition. |
| external | Object | {} | Pro | Sets external data source. |
| height | Number | 360 | Pro, Lite | Sets Evo Slider height. |
| hideCurrentTitle | Boolean | false | Pro | Hides current title bar navigation (accordion). |
| imageScale | String | "fullSize" | Pro | Defines how the main image will be scalled inside it's container. |
| interval | Number | 5000 | Pro, Lite | Autoplay interval time in milliseconds (1s = 1000ms). |
| keyboard | Boolean | true | Pro, Lite | Enables keyboard navigation. |
| linkTarget | String | "_blank" | Pro | Image link target attribute ("_blank", "frame name", "_parent", "_self", or "_top"). |
| loadFinish | Function | function(){} | Pro | Callback function to run when finish loading external data. |
| loadStart | Function | function(){} | Pro | Callback function to run when start loading external data. |
| loop | Boolean | true | Pro, Lite | Rotates slideshow. |
| mode | String | "accordion" | Pro | Sets Evo Slider layout mode. |
| mouse | Boolean | true | Pro, Lite | Enables mouse wheel scroll navigation. |
| nextText | String | "Next" | Pro | Sets the next direction navigation text. |
| numberSlides | Number | 5 | Pro | Sets how many slides you want in your Evo Slider (external data). |
| outerText | Boolean | false | Pro | Enables outer text description. |
| outerTextPosition | String | "right" | Pro | Sets the position of the outer text description. |
| outerTextSpace | Number | 5 | Pro | The space in pixels between the outer text element and the slides. |
| pauseOnHover | Boolean | true | Pro, Lite | Stops slideshow on hover. |
| pauseOnClick | Boolean | true | Pro, Lite | Stops slideshow if user click the control navigation. |
| permalink | Boolean | false | Pro | Enable or disable linking to slides via the Url. |
| playButtonAutoHide | Boolean | false | Pro | Sets play button to auto hide on hover. |
| prevText | String | "Prev" | Pro | Sets the prev direction navigation text. |
| readMoreText | String | Read More | Pro | Allows you to set up the text of the read more button. |
| rotatorThumbsAlign | String | "left" | Pro | Sets the float position of the rotator thumbnail images ("left" or "right"). |
| showDirectionText | Boolean | false | Pro | Displays the text of directional control. |
| showIndex | Boolean | true | Pro, Lite | Displays index in toggle icon and bullets control. |
| showPlayButton | Boolean | true | Pro | Enables play button. |
| showReadMore | Boolean | false | Pro | Allows you to display read more button. |
| showRotatorThumbs | Boolean | true | Pro | Shows rotator thumbnail images. |
| showRotatorTitles | Boolean | true | Pro | Shows rotator list titles. |
| slideSpace | Number | 5 | Pro, Lite | The space between slides in pixels (px). |
| speed | Number | 500 | Pro, Lite | The speed of the slide transition effect in milliseconds. |
| startIndex | Number | 0 | Pro, Lite | The index of the slide to show when Evo Slider initialized. |
| swipe | Boolean | true | Pro | Enables or disables touch swipe support. |
| textMode | String | "overlay" | Pro | Sets text description layout mode. |
| titleClockWiseRotation | Boolean | false | Pro | Rotates title bar navigation clock wise when initialized. |
| toggleIcon | Boolean | true | Pro, Lite | Enables toggle icon. |
| vimeo | Object | { title: 1, byline: 1, portrait: 1, autoplay: 0 } | Pro | Customize the Vimeo player. |
| width | Number | 960 | Pro, Lite | Sets Evo Slider width. |
| youtube | Object | { autoplay: 0, showinfo: 1, autohide: 2 } | Pro | Customize the YouTube player. |