Versatel

Versatel is a smart carousel plugin that is powered by jQuery. This carousel has five transitions and can work with any kind of DOM element.

Getting Started

Installation

Add the latest Versatel files along with jQuery to the header of your site.

<link type="text/css" rel="stylesheet" href="css/styles.css">

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="js/versatel.js"></script>

Adding Content

Adding carousel content is very easy. All content must be included inside of a container called #showcase and each child must be given a class of .slide. This lets Versatel know where it needs to look for carousel content and what children need to be included in the slides.

<div id="showcase">
	<img class="slide" src="https://picsum.photos/458/354/?image=806" />
	<img class="slide" src="https://picsum.photos/458/354/?image=106" />
	<img class="slide" src="https://picsum.photos/458/354/?image=206" />
</div>

Applying Settings

There are a number of settings that can be toggled for Versatel. You can apply different settings by including the following code near the bottom of your page:

userControls = {
	effectDuration : .5,
	effect : 'fade',
	cycleback : true
}

*A comprehensive list of available settings can be found in the settings section.

Multipurpose

Versatel is unique in the fact that it can work with any kind of DOM element. You can define and pass the type of content through the userControls object to have different types of content show in the carousel.

Settings

You can pass these options as key/value object to controls through the userControls object. It is also possible to modify defaults directly at Versatel JS file.

Name	Type	Default	Description
content	String	img	Sets the content type of the carsousel. Accepts any DOM element (div, img, table, etc.)
showControls	Boolean	true	If set to false, the carousel's navigational controls will be hidden.
effect	String	default	Sets the slide transition effect. Supports `default`, `fade`, `slide`, `verticalSlide` and `slidingFade`.
effectDuration	Integer	0.25	Sets the animation speed in seconds (to be used in tandem with `effect`).
prevText	String	« Previous	Sets the text for the "Previous" button.
nextText	String	Next »	Sets the text for the "Next" button.
containerWidth	Integer	auto	Sets the width of the content container for non-image DOM elements.
cycleback	Boolean	false	If set to true, this setting will allow for the cycling back through content if the min or max index is reached.
autoplay	Boolean	false	If set to true, the carousel will start playing after the page loads.
pauseTime	Integer	10	Sets the pause time in between each slide (to be used in tandem with `autoplay`).

Demo

See the demo on JSFiddle.

Browser Support

Supported Browsers : Chrome, Firefox, Safari, Opera, Edge, IE9+.

License

The source code can be found on github and is licensed under the MIT license.

Developed by Peter Burdette