jQuery Simple Slider

jQuery Simple Slider is a simple, lightweight and "expandable" jQuery plugin with multiple options.
In order to work, you just need to have a HTML div.container > div.element structure.

Example of simple integration : jQuery(".slider").simpleSlider();
Note: You can use ID or class.

The plugin has default options to set/unset navigation elements and define columns and slide speed :

navigation: true : Adds navigation previous and next buttons
prevText: "<" : Sets custom text for previous link
nextText: ">" : Sets custom text for next link
pagination: false : Adds pagination index links
autoplay: false : Sets autoplay
delay: 4000 : Set autoplay timer
speed: 500 : Set animation speed
customPrevClass: '' : Add custom classes to previous navigation link
customNextClass: '' : Add custom classes to next navigation link
numItems: 2 : Choose the number of items to display
infinite: true : Infinite carrousel
loop: true : To use only if infinite is set to false
loopPrev: false : For RTL languages, items slide from left to right
autoHeight: false : Custom height
easing: 'easeOutQuint' : Some easing plugins such as jQuery UI must be enabled for this to work
parentControlsLevel: 0 : Choose the level (0, 1, 2, 3) to append your controls in DOM, 0 means relative to the $this root div, 1 means 1 divs back from the $this root div, and so on
callback: {
onBeforeInit: function() {} : Callback function. Just before carousel creation.
onAfterInit: function() {} : Callback function. Right after carousel creation.
onBeforeSlide: function() {} : Callback function. Happens before slide is animated
onAfterSlide: function() {} : Callback function. Happens after slide is animated
}

I have added the touchswipe support for mobile devices, this is optional of course for the plugin to work.

Download the demo with plugin here.

Examples

1-column

Code

jQuery(".slider1").simpleSlider({
	navigation: true,
	prevText: "Previous",
	nextText: "Next",
	pagination: false,
	autoplay: false,
	delay: 8000,
	speed: 500,
	numItems: 1
});
				

Multiple columns

Code

jQuery(".slider2").simpleSlider({
	navigation: true,
	prevText: "Previous",
	nextText: "Next",
	pagination: false,
	autoplay: false,
	delay: 8000,
	speed: 500,
	numItems: 3
});
				

Prev/Next Navigation

Code

jQuery(".slider3").simpleSlider({
	navigation: true,
	prevText: "Previous",
	nextText: "Next",
	pagination: false,
	autoplay: false,
	delay: 8000,
	speed: 500,
	numItems: 1
});
				

Numbered Navigation

Code

jQuery(".slider4").simpleSlider({
	navigation: false,
	prevText: "Previous",
	nextText: "Next",
	pagination: true,
	autoplay: false,
	delay: 8000,
	speed: 500,
	numItems: 1
});
				

Autoplay

Code

jQuery(".slider5").simpleSlider({
	navigation: false,
	prevText: "Previous",
	nextText: "Next",
	pagination: false,
	autoplay: true,
	delay: 8000,
	speed: 500,
	numItems: 1
});
				

Non infinite, loops to beginning

Code

jQuery(".slider6").simpleSlider({
	navigation: false,
	prevText: "Previous",
	nextText: "Next",
	pagination: false,
	autoplay: true,
	delay: 8000,
	speed: 500,
    infinite: false,
    loop: true,
	numItems: 2
});
				

Have fun !

Etienne Fardet