Settings

Name	Default value	Possible values
// Main
layout	"horizontal"	"horizontal", "vertical"
The way the slide image and text modules are positioned, either horizontally (next to each other) or vertically (on top of each other).
horRatio	2.5	<number>
The ratio between the width and height of the slider when the layout is horizontal. Given that the width changes based on the available space, the ratio is used to keep the height proportional.
verRatio	1.3	<number>
The ratio between the width and height of the slider when the layout is vertical. Given that the width changes based on the available space, the ratio is used to keep the height proportional.
switchLayout	700	<number>, false
When the slider width gets under the specified value, switch the layout to vertical. Applicable when the layout is horizontal.
// Slides
slides	[]	<list>
A list of properties for each slide.
- type	"image-text"	"image-text", "image", "text"
The content type of the slide.
- horOrder	"image/text"	"image/text", "text/image"
The order of the modules when the layout is horizontal.
- verOrder	"image/text"	"image/text", "text/image"
The order of the modules when the layout is vertical.
- horDimensions	{image: 50, text: 50}	{image: <%>, text: <%>}
The dimensions of the modules when the layout is horizontal.
- verDimensions	{image: 50, text: 50}	{image: <%>, text: <%>}
The dimensions of the modules when the layout is vertical.
- imageScale	"fill"	"fill", "fit", "stretch"
The way the image will be scaled and positioned within the available space. fill: Scale to fill all of the available space, the aspect ratio will be maintained and the image will be centered. fit: Scale to fit within the available space, the aspect ratio will be maintained and the image will be centered. stretch: Scale to the exact dimensions of the available space, the aspect ratio will not be maintained.
- textPosition	"center"	"top", "center", "bottom"
The vertical position of the text.
// Slide
slide	{...}	{...}
A container for the slide settings.
- horEffect	"horSlide"	"fade", "modularFade", "horSlide", "horModularSlide", "verSlide", "verModularSlide", "horStack", "horModularStack", "verStack", "verModularStack", "horLinearSlide", "horQuickLinearSlide", "verLinearSlide", "verQuickLinearSlide", "none"
The effect of the slides when the layout is horizontal. Modular effects animate the image and the text modules separately.
- horAnimate	"default"	{time: <ms>, ease: <ease>, delay: <ms>, dist: <px>, step: <ms>}, "default"
The animation parameters of the horizontal layout effect. Can be given an object with parameters or can be set to "default" to automatically take the default parameters for the current effect. time: The duration of the effect, in milliseconds. ease: The ease of the animation. For the possible values, see the Ease options at the bottom of the table. delay: The time between the hiding of the current slide and the showing of the next slide. dist: The distance that the slide moves during the effect, in pixels. step: The delay between the animation of the image and the animation of the text, for modular effects. The "time" and "ease" parameters are used by all effects. The use of the others vary based on the effect.
- verEffect	"horSlide"	"fade", "modularFade", "horSlide", "horModularSlide", "verSlide", "verModularSlide", "horStack", "horModularStack", "verStack", "verModularStack", "horLinearSlide", "horQuickLinearSlide", "verLinearSlide", "verQuickLinearSlide", "none"
The effect of the slides when the layout is vertical. Modular effects animate the image and the text modules separately.
- verAnimate	"default"	{time: <ms>, ease: <ease>, delay: <ms>, dist: <px>, step: <ms>}, "default"
The animation parameters of the vertical layout effect. Can be given an object with parameters or can be set to "default" to automatically take the default parameters for the current effect. time: The duration of the effect, in milliseconds. ease: The ease of the animation. For the possible values, see the Ease options at the bottom of the table. delay: The time between the hiding of the current slide and the showing of the next slide. dist: The distance that the slide moves during the effect, in pixels. step: The delay between the animation of the image and the animation of the text, for modular effects. The "time" and "ease" parameters are used by all effects. The use of the others vary based on the effect.
- border	true	true, false
If the slides should have a small border around them.
// Arrows
arrows	{...}	{...}
A container for the arrow settings.
- location	"outside"	"outside", "inside"
If the arrows are located on the outside or on the inside.
- outsideType	1	1, 2, 3
The type of the arrows when they are on the outside.
- insideType	3	1, 2, 3
The type of the arrows when they are on the inside.
- switchLocation	700	<number>, false
When the slider width gets under the specified value, switch the arrows to inside. Applicable when the arrows are on the outside.
- hide	true	true, false
If the arrows should be hidden and shown when the mouse moves over the slider body. Applicable when the arrows are on the inside.
- animate	{time: 200, ease: "easeOutQuad"}	{time: <ms>, ease: <ease>}
The animation parameters of the arrows. time: The duration of the effect, in milliseconds. ease: The ease of the animation. For the possible values, see the Ease options at the bottom of the table. Applicable when the arrows animate, such as for location: "inside" and hide: true.
// Nav
nav	{...}	{...}
A container for the nav settings.
- location	"outside"	"outside", "inside"
If the nav is located on the outside or on the inside.
- outsideType	1	1, 2, 3
The type of the nav when it is on the outside.
- outsidePosition	"center"	"left", "center", "right"
The position of the nav when it is located on the outside.
- insideType	3	1, 2, 3
The type of the nav when it is on the inside.
- insidePosition	"center"	"left", "center", "right"
The position of the nav when it is located on the inside.
- switchLocation	700	<number>, false
When the slider width gets under the specified value, switch the nav to inside. Applicable when the nav is on the outside.
- hide	true	true, false
If the nav should be hidden and shown when the mouse moves over the slider body. Applicable when the nav is on the inside.
- animate	{time: 200, ease: "easeOutQuad"}	{time: <ms>, ease: <ease>}
The animation parameters of the nav. time: The duration of the effect, in milliseconds. ease: The ease of the animation. For the possible values, see the Ease options at the bottom of the table. Applicable when the nav animates, such as for location: "inside" and hide: true.
// Other
drag	{...}	{...}
A container for the drag settings.
- enabled	true	true, false
If navigation through dragging is enabled.
- device	"all"	"all", "computer", "mobile"
The type of devices that dragging is enabled for.
loop	true	true, false
If the slider should loop from the last slide to the first and vice-versa.
autoplay	{...}	{...}
A container for the autoplay settings.
- enabled	false	true, false
If the slider should automatically switch slides at an interval of time.
- time	5000	<ms>
The time that a slide is displayed when autoplaying. The time is expressed in milliseconds (ex: 5000 for 5 seconds). The autoplay is paused while the mouse is hovering over the slider body.

Ease options

The available ease values for the animation settings are the following:

- easeInSine
- easeOutSine
- easeInOutSine
- easeInQuad
- easeOutQuad
- easeInOutQuad
- easeInCubic
- easeOutCubic
- easeInOutCubic
- easeInQuart
- easeOutQuart
- easeInOutQuart
- easeInQuint
- easeOutQuint
- easeInOutQuint
- easeInExpo
- easeOutExpo
- easeInOutExpo
- easeInCirc
- easeOutCirc
- easeInOutCirc
- ease
- ease-in
- ease-out
- ease-in-out
- spring

+ more on velocityjs.org/#easing

Methods

nextSlide

jQuery(".karoslider").karoSlider("nextSlide");

Shows the next slide.

prevSlide

jQuery(".karoslider").karoSlider("prevSlide");

Shows the previous slide.

showSlide
```
jQuery(".karoslider").karoSlider("showSlide", 3);
```
Shows a certain slide, based on the number supplied.

startAutoplay

jQuery(".karoslider").karoSlider("startAutoplay");

Starts the autoplay.

stopAutoplay

jQuery(".karoslider").karoSlider("stopAutoplay");

Stops the autoplay.

resetAutoplay

jQuery(".karoslider").karoSlider("resetAutoplay");

Resets the autoplay.

version
```
jQuery(".karoslider").karoSlider("version");
```
Returns the current version of the plugin.
destroy
```
jQuery(".karoslider").karoSlider("destroy");
```
Destroys the slider. Removes everything that was built when the slider was initially created.