So simple

your grandma' would get bored setting it

Minimum html needed to use with a pagination and a navigation

<div class="extra-slider-wrapper">
	<div class="extra-slider">
			<div>
				<img src="http://bit.ly/1gnYuBa" alt="" width="900" height="500">
			</div>
			<div>
				<img src="http://bit.ly/NQX3zB" alt="" width="900" height="500">
			</div>
			<div>
				<img src="http://bit.ly/1gnZxBh" alt="" width="900" height="500">
			</div>
			<div>
				<img src="http://bit.ly/1gnYtxa" alt="" width="900" height="500">
			</div>
	</div>
	<div class="navigation">
		<a href="#" class="prev">Previous</a>
		<a href="#" class="next">Next</a>
	</div>
	<div class="pagination"></div>
</div>

Embed the necessary javascript

First, you need to load jQuery and TweenMax. If you need your slider to be draggable, don't forget to include Greensock's Draggable too.

<!-- Load jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Load Greensock's TweenMax -->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>

<!-- Load Greensock's Draggable plugin -->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/utils/Draggable.min.js"></script>

<!-- Load the slider javascript file -->
<script src="js/extra.slider.min.js">

Add the minimum css

This is the minimum code required to display a slider. You will probably need to specify dimensions in order to make it fit your needs. Please note that there is no default styling for navigation and pagination links, it's up to you !

<link rel="stylesheet" href="css/extra.slider.css">

Initialize the slider

<script>
$(document).ready(function () {
	var	$sliderWrapper = $(".slider-wrapper"),
		$slider = $sliderWrapper.find('.extra-slider');
		$slider.extraSlider({
			'navigation': $sliderWrapper.find(".navigation"),
			'pagination': $sliderWrapper.find(".pagination")
		});
});
</script>

Options

auto

default: false

add an integer, corresponding to the delay in seconds

autoPauseEvents

default: 'mouseenter'

a string of event(s) that will trigger the pause mode

autoResumeEvents

default: 'mouseleave'

a string of event(s) that will trigger the resume mode

direction

default: 'x'

set to y to create a vertical slider

draggable

default: false

set it to true to make the slider draggable

ease

default: 'Quad.easeOut'

can be a custom ease provided by greensock

itemSelector

default: '>*'

a jquery string filter to find elements

keyboard

default: false

set it to true to make it keyboard controllable

margin

default: 0

pass an integer to create more clones on the sides (useful for panoramic sliders)

minDrag

default: 50

minimum movement in pixels before allowing drag to move the slider to the next slide

navigation

default: null

pass it a custom jquery object that will be used as a navigation. Prev and next links will be created automatically if they do not exits.

pagination

default: null

pass it a custom jquery object that will be used as a pagination

paginateContent

default: an empty string

add a custom string to fill the pagination links. The string %d will be replaced by the index of the slide.

speed

default: 0.5

pass a number in second to set the animation speed

startAt

default: 0

pass an integer to start the slider at a specific slide

type

default: 'slide'

set it to fade to use fading transitions

waitBeforeMove

default: false

set it to true will make sure that the current slide transition is completed before going to another slide

onGoToNext

default: null

params: currentItem (jQuery object), currentIndex (int)

calls a function just before going to the next slide

onGoToPrev

default: null

params: currentItem (jQuery object), currentIndex (int)

calls a function just before going to the previous slide

onInit

default: null

params: currentItem (jQuery object), currentIndex (int)

calls a function when the slider is set up

onMoveEnd

default: null

params: currentItem (jQuery object), currentIndex (int)

calls a function when the slider stops animating

onMoveStart

default: null

params: currentItem (jQuery object), currentIndex (int), previousIndex (int), unfilteredCurrentIndex (int)

calls a function when the slider starts animating

onPause

default: null

params: currentItem (jQuery object), currentIndex (int)

if auto is defined, calls a function when the slider pauses the automatic slider

onResume

default: null

params: currentItem (jQuery object), currentIndex (int)

if auto is defined, calls a function when the slider resumes the automatic timer

onUpdate

default: null

params: currentItem (jQuery object), currentIndex (int)

calls a function when the slider updates itself (after a resize for example)

onUpdateClones

default: null

params: currentItem (jQuery object), currentIndex (int)

calls a function when the slider updates the clones (when type is set to slide)

onDragStart

default: null

params: currentItem (jQuery object), currentIndex (int)

calls a function when the slider starts beeing dragged (draggable needs to be set to true)

onDragEnd

default: null

params: currentItem (jQuery object), currentIndex (int)

calls a function when the slider stops beeing dragged (draggable needs to be set to true)

Methods

Note: $('.extra-slider') can be replace with an ID you used to set the slider.

extra:slider:update

$('.extra-slider').trigger('extra:slider:update');

Forces the slider to update

extra:slider:next

$('.extra-slider').trigger('extra:slider:next');

Go to the next slide

extra:slider:prev

$('.extra-slider').trigger('extra:slider:prev');

Go to the previous slide

extra:slider:goto

$('.extra-slider').trigger('extra:slider:goto', [slideNumber]);

Go to the slide specified by the slideNumber parameter (must be an integer)

extra:slider:pause

$('.extra-slider').trigger('extra:slider:pause');

Pauses the slider if auto has been set.

extra:slider:resume

$('.extra-slider').trigger('extra:slider:resume');

Resume the slider auto has been set and the slider is paused.

Events

Note: $('.extra-slider') can be replace with an ID you used to set the slider.

extra:slider:init

params: currentItem (jQuery object), currentIndex (int)

$('.extra-slider').on('extra:slider:init', function(event, currentItem, currentIndex) {});

Triggered when the slider inits the first time

extra:slider:moveStart

params: currentItem (jQuery object), currentIndex (int), previousIndex (int), unfilteredCurrentIndex (int)

$('.extra-slider').on('extra:slider:moveStart', function(event, currentItem, currentIndex, previousIndex, unfilteredCurrentIndex) {});

Triggered when the slider starts the animation process

extra:slider:moveEnd

params: currentItem (jQuery object), currentIndex (int)

$('.extra-slider').on('extra:slider:moveEnd', function(event, currentItem, currentIndex) {});

Triggered when the slider has finished moving

extra:slider:updated

params: currentItem (jQuery object), currentIndex (int)

$('.extra-slider').on('extra:slider:update', function(event, currentItem, currentIndex) {});

Triggered when the slider updates itself

extra:slider:updateClones

params: currentItem (jQuery object), currentIndex (int)

$('.extra-slider').on('extra:slider:updateClones', function(event, currentItem, currentIndex) {});

Triggered when the slider updates the clones on slide type

extra:slider:paused

params: currentItem (jQuery object), currentIndex (int)

$('.extra-slider').on('extra:slider:paused', function(event, currentItem, currentIndex) {});

Triggers an update when the slider is paused in auto mode

extra:slider:resumed

params: currentItem (jQuery object), currentIndex (int)

$('.extra-slider').on('extra:slider:resumed', function(event, currentItem, currentIndex) {});

Triggers an update when the slider is resumed in auto mode

extra:slider:onGotoPrev

params: currentItem (jQuery object), currentIndex (int)

$('.extra-slider').on('extra:slider:onGotoPrev', function(event, currentItem, currentIndex) {});

Triggers an update before the slider goes to the previous item

extra:slider:onGotoNext

params: currentItem (jQuery object), currentIndex (int)

$('.extra-slider').on('extra:slider:onGotoNext', function(event, currentItem, currentIndex) {});

Triggers an update before the slider goes to the next item

extra:slider:onDragStart

params: currentItem (jQuery object), currentIndex (int)

$('.extra-slider').on('extra:slider:onGotoPrev', function(event, currentItem, currentIndex) {});

Triggers an update when the slider starts beeing dragged

extra:slider:onDragEnd

params: currentItem (jQuery object), currentIndex (int)

$('.extra-slider').on('extra:slider:onDragEnd', function(event, currentItem, currentIndex)) {});

Triggers an update when the slider stops beeing dragged