Everslider - Responsive jQuery Carousel Plugin

You just purchased Everslider - Responsive jQuery Carousel Plugin! If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here

Thank you. flGravity


Documentation

Back to preview

1. About

Everslider - Responsive jQuery Carousel Plugin will help you create multi functional, eye-catching carousel slider for your site with any content going inside - be it just a photo or some animated content! Plugin works on mobiles, tables and in all desktop browsers starting with IE7. It's responsive and retina-ready! It uses hardware-accelerated CSS3 transitions and switches to jQuery animate if necessary. Everslider supports all kinds of navigation, like mousewheel, touchswipe, drag and keyboard. It has timer mode, two animation effects - slide and fade, and much more!

Hope you will enjoy using Everslider!

2. Quick Installation

Unzip package that you have downloaded from Codecanyon and copy js/jquery.everslider.min.js and css/everslider.css files into js/ and css/ folders of your site. Also copy all images from images/ folder to the corresponding folder under your site. After that open your index.html and add plugin CSS and JS files into the head section (if necessary include jquery and jquery-easing before the plugin, see example below)

<!-- jQuery library and easing -->
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

<!-- Everslider CSS and JS files -->
<link type="text/css" href="css/everslider.css" media="screen"/>
<script type="text/javascript" src="js/jquery.everslider.min.js"></script>

If you are going to use mousewheel navigation (can be enabled with "mousewheel" option) you also have to include https://github.com/brandonaaron/jquery-mousewheel before Everslider JS file.

Next step is the markup. First create DIV container with "everslider" class and some unique ID. Inside this DIV add UL list with "es-slides" class, like so

<div id="mycarousel" class="everslider">
	<ul class="es-slides">
		<li><img src="images/image1.jpg" alt=""></li>
		<li><img src="images/image2.jpg" alt=""></li>
		...
		<li><img src="images/image3.jpg" alt=""></li>
	</ul>
</div>

In this example I use images as content of slides, but in fact it can be anything. Every slide (LI item) in carousel should have some initial width, height and right margin defined in pixels! You can do this in css or use "itemWidth", "itemHeight" and "itemMargin" plugin options. Also its important to remember that slides should't have borders or paddings! If you want to introduce paddings or borders to the slides do this by adding inner DIVs

<li>
	<div class="inner-slide">
		<img src="images/image1.jpg" alt=""/>
	</div>
</li>

In example above slide content is wrapped into ".inner-slide" DIV that can be styled to add some paddings.

After you have finished with the markup it's time to initialize plugin when DOM is ready

<script type="text/javascript">
	$(document).ready(function(){
		$('#mycarousel').everslider({
			mode: 'carousel',
			moveSlides: 2
		});
	});
</script>

For information about available options please refer to the "Configuration Options" section below.

3. Configuration Options

In list below you can find plugin configuration options as well as three callback functions

	// default settings
	var s = $.extend({
		mode: 'normal',						// carousel mode - 'normal', 'circular' or 'carousel'
		effect: 'slide',					// animation effect - 'slide' or 'fade'
		useCSS: true,						// set false to disable CSS3 transitions
		itemWidth: false,					// slide width, px (or false for css value)
		itemHeight: false,					// slide height, px (or false for css value)
		itemMargin: false,					// slide margin, px (or false for css value)
		itemKeepRatio: true,				// during resize always retain side ratio of a slide
		maxWidth: '100%',					// max container width, px or %
		maxVisible: 0,						// show only N slides (overrides maxWidth, 0 to ignore)
		moveSlides: 1,						// number of slides to move or 'auto' to move all visible
		slideDelay: 0,						// slide effect initial delay, ms
		slideDuration: 500,					// slide effect duration, ms
		slideEasing: 'swing',				// slide effect easing
		fadeDelay: 200,						// fade effect delay, ms
		fadeDuration: 500,					// fade effect duration, ms
		fadeEasing: 'swing',				// fade effect easing
		fadeDirection: 1,					// 1 is default, set -1 to start fade from opposite side
		fitDelay: 300,						// slides fit (carousel resize) delay, ms
		fitDuration: 200,					// slides fit (carousel resize) duration, ms
		fitEasing: 'swing',					// slides fit (carousel resize) easing
		syncHeight: false,					// sync carousel height with largest visible slide
		syncHeightDuration: 200,			// carousel height sync duration, ms
		syncHeightEasing: 'swing',			// carousel height sync easing
		navigation: true,					// enable prev/next navigation
		nextNav: 'Next',		// next navigation control, text/html
		prevNav: 'Previous',	// previous navigation control, text/html
		pagination: true,					// enable pagination (only 'normal' or 'circular' mode)
		touchSwipe: true,					// enable touchSwipe
		swipeThreshold: 50,					// pixels to exceed to start slide transition
		swipePage: false,					// allow touchswipe to scroll page also
		mouseWheel: false,					// enable mousewheel (requires jquery-mousewheel plugin)
		keyboard: false,					// enable keyboard left/right key navigation
		ticker: false,						// enable ticker ('circular' or 'carousel' mode)
		tickerTimeout: 2000,				// ticker timeout, ms
		tickerAutoStart: true,				// start ticker when plugin loads
		tickerPlay: 'Play',	// ticker play control, text/html
		tickerPause: 'Pause',	// ticker pause control, text/html
		tickerHover: false,					// pause ticker on mousehover
		tickerHoverDelay: 300,				// delay before ticker will pause on mousehover
		slidesReady: function(){},			// slider ready callback
		beforeSlide: function(){},			// before slide callback
		afterSlide: function(){}			// after slide callback
	}, c);

"slidesReady" callback runs only once on plugin init just after slides have been adjusted. "this" keyword inside the function refers to the container DOM element. Function accepts one argument which is an Object containing plugin API methods. "slidesReady" callback is a good place to add your custom init code.

Next two callbacks - "beforeSlide" and "afterSlide" are executed before and after every slide animation. "this" keyword inside these functions refers to the container DOM element. Both functions accept one argument which is array of slides (LI items). For "beforeSlide" callback this array contains slides that were visible before animation started and for "afterSlide" this array contains slides that became visible when animation completed. These functions can be used to add various animations to carousel slides that run in sync with carousel itself. Read "Animated Carousel Items" section to find out more in this matter.

4. Plugin API

Everslider provides following basic API methods, which you can use to control carousel

slideNext() - slide carousel next slidePrevious() - slide carousel previous slideTo() - rewind carousel to specific position (requires one argument) isSliding() - check if any slide animation is running getVisibleSlides() - get array of currently visible slides tickerPlay() - resume autoplay if "ticker" is enabled tickerPause() - pause autoplay if "ticker" is enabled

Any of these API methods can be invoke in two ways. You can use jQuery $.trigger() or $.triggerHandler() functions to send "everslider" custom event with API method name to the container element, like so

$('#mycarousel').trigger("everslider", "slideNext");

Or (second approach) you can receive object containing API methods using jQuery $.data() and then call API methods directly

var carousel = $('#mycarousel').data('everslider');
carousel.slideNext();

All these API methods do not require arguments except one - slideTo(). When you call this method you should specify zero-based position of a slide in carousel that you want to scroll to. Here is how to call slideTo() using $.trigger()

$('#mycarousel').trigger("everslider", ["slideTo",1]);

If you call slideTo() using API object then simply pass position as argument to the function.

Also note that tickerPause() and tickerPlay() methods work only when "ticker" option is set to true and if carousel mode is either "circular" or "carousel".

5. Animated Carousel Items

In this section I will explain how you can add animated elements to carousel items (like animated captions) and make them work in sync with carousel. To get better idea what I mean take a look once again on "Image Slider" in Everslider preview. Every image has a caption that shows up at the end of carousel motion.

Let's say you want to show caption using "fade-in" animation when carousel item(s) comes into view. So, how to do this? Well, it's easy when you understand what means Everslider provides for this. In general you can create animations using pure CSS3 or using jQuery or both.

Let's start with CSS3! To trigger CSS3 transitions for carousel items you have to rely on two classes that are assigned to carousel items at the beginning and at the end of carousel movement. At the moment before carousel will start moving, items that will show up, will get class "es-before-slide". When carousel will finish moving, items with "es-before-slide" class will get another class - "es-after-slide". So using "es-before-slide" and "es-after-slide" classes you can change any css properties and trigger animations in sync with carousel movement. BTW. All carousel items that are out of view area will have no class assigned.

Example. Let's assume that inside of every carousel item we have a caption - DIV with class "caption"


	
    
		
  • 
			
    This is a caption that I want to animate
    
			
		
    • 
		...
	




#mycarousel .caption {
	position: absolute;
	top: 10px;
	left: 10px;
	background: #fff;
	padding: 10px;
}

With this style captions will be always visible. Now let's add opacity transitions for captions. To do this we add following CSS styles

#mycarousel .caption {
	position: absolute;
	top: 10px;
	left: 10px;
	background: #fff;
	padding: 10px;
	-webkit-transition: opacity .5s;
	-moz-transition: opacity .5s;
	-o-transition: opacity .5s;
	transition: opacity .5s;
}

#mycarousel .es-before-slide .caption {
	opacity: 0;
}

#mycarousel .es-after-slide .caption {
	opacity: 1;
}

Hope it's clear!

Now, if want to use jQuery to animate captions we will have to do next. Basically there is 2 ways - use "beforeSlide" and "afterSlide" callbacks, or use custom "es-before-slide" and "es-after-slide" events that are triggered by appropriate carousel items. I'm going to explain second approach with events.

We start with basic css for captions

	#mycarousel .caption {
	position: absolute;
	top: 10px;
	left: 10px;
	background: #fff;
	padding: 10px;
	display: none;
}

Now to make captions "fade-in" at the end of carousel move, we add following JS code

6. Common Questions

This section covers some common questions that can raise when you will be using Everslider plugin. If you cannot find answer, please feel free to contact me!

Where do I set size of carousel slides?

Setting size of carousel slides (LI elements in "es-slides" UL list) is essential and is required by Everslider to work properly! Default slide size is defined in everslider.css and is 500x300px with 10px right margin. Also you can use plugin options "itemWidth", "itemHeight" and "itemMargin" to set slide size when plugin init and override any css value. Make sure however that you don't set paddings or borders on slides! For this use inner DIVs as explained above.

What can I do if slide content appears partly hidden?

When plugin starts it saves initial slide size and when you resize browser window Everslider resizes slides preserving their original ratio. This may result in content being partially hidden due to the oveflow property on container, especially when slide content is a mixture of text and images. To fix this you should set itemKeepRatio plugin option to false. This will allow slides to extend to reveal all available content.

What easing can I use for transitions?

Everslider maps jQuery easing functions to cubic-bezier equations for CSS3 transitions. So you can use following easing functions: linear swing easeInQuad easeOutQuad easeInOutQuad easeInCubic easeOutCubic easeInOutCubic easeInQuart easeOutQuart easeInOutQuart easeInQuint easeOutQuint easeInOutQuint easeInSine easeOutSine easeInOutSine easeInExpo easeOutExpo easeInOutExpo easeInCirc easeOutCirc easeInOutCirc easeInBack easeOutBack easeInOutBack

Why I don't see pagination in "carousel" mode?

Pagination is available only in "normal" or "circular" plugin mode. In "carousel" mode it's not available.

Is it possible to make carousel fixed-width?

By default Everslider carousel will extend to 100% width of containing block. If you want to make its width fixed, you can set maxWidth plugin option to fixed pixel value.

What are fitDelay, fitDuration and fitEasing options for?

These plugin options control animation that adjusts carousel to fit new layout after browser window has been resized.

How can I limit number of visible slides?

You can limit number of visible slides with maxVisible plugin option. When this option is set it will prevent Everslider to extend more than is necessary to display this number of slides (it takes initial slide width into account).

How can I configure carousel to scroll visible amount of slides?

By default Everslider plugin scrolls one slide at once. To scroll the number of visible slides you should set moveSlides option to 'auto'.


Thanks for reading!