Simple jQuery/CSS3 slider

A simple slider that does what a simple slider has to do: slide slides!

Installation

Include jQuery, simpleSlider.js and transit.js in your head. The slider will automatically change transit's useTransitionEnd property to true. You can disable this by setting updateTransit: false in your options.

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<script type="text/javascript" src="transit.js"></script>
<script type="text/javascript" src="jquery.simpleslider.js"></script>

Add a div to your site containing the slides. The standard name for these divs are .slider and .slide, but these can be changed in the options object.

<div class='slider'>
	<div class='slide'>
		<div class='slidecontent'>
			<h1>Solar Dolar Wolar Woot</h1>
			<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere cursus euismod.Aenean ut tortor leoing elit. Etiam posuere cursus euismod.Aenean ut tortor leo.</h2>
		</div>
	</div>
	<div class='slide' >
		<div class='slidecontent'>
			<h1>Solar Dolar Wolar Woot</h1>
			<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere cursus euismod.Aenean ut tortor leo.</h2>
		</div>
	</div>
</div>

After creating the HTML you have to add some css (or enable the useDefaultCSS option). This can be as short and simple as:

.slider{
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
}

.slide{
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	float: left;
	position: absolute;
}

Create the slider

$(document).ready(function(){
	$(".slider").simpleSlider();
});

Custom options

You can also control the options of the simpleSlider. Just parse an object with the options into the simpleSlider().

$(document).ready(function(){
	// Default options
	var options = {
		slides: '.slide', // The name of a slide in the slidesContainer
		swipe: true,	// Add possibility to Swipe
		magneticSwipe: true, // Add 'magnetic' swiping. When the user swipes over the screen the slides will attach to the mouse's position
		transition: "slide", // Accepts "slide" and "fade" for a slide or fade transition
		slideTracker: true, // Add a UL with list items to track the current slide
		slideTrackerID: 'slideposition', // The name of the UL that tracks the slides
		slideOnInterval: true, // Slide on interval
		interval: 5000, // Interval to slide on if slideOnInterval is enabled
		animateDuration: 1500, // Duration of an animation
		animationEasing: 'easeInOut', // Accepts: linear ease in out in-out snap easeOutCubic easeInOutCubic easeInCirc easeOutCirc easeInOutCirc easeInExpo easeOutExpo easeInOutExpo easeInQuad easeOutQuad easeInOutQuad easeInQuart easeOutQuart easeInOutQuart easeInQuint easeOutQuint easeInOutQuint easeInSine easeOutSine easeInOutSine easeInBack easeOutBack easeInOutBack
		pauseOnHover: false, // Pause when user hovers the slide container
		useDefaultCSS: false // Add default CSS for positioning the slides
	};

	$(".slider").simpleSlider(options);
});

Control the slider

You have to get the data from the dom element if you want to control the slider. The following code shows you how to do that

$(document).ready(function(){
	$(".slider").simpleSlider();
	var slider = $(".slider").data("simpleslider");

	slider.nextSlide(); // Go to the next slide
	slider.prevSlide(); // Go to the previous slide
	slider.nextSlide(slidenumber); // Go to the given slide
});

If enabled the slider automatically creates a list with list-items that you can use to control the slider.

Events

SimpleSlider will trigger a init, beforeSliding and afterSliding event. You can bind on these using the following code:

	$(".slider").on("init", function(event){
		// event.totalSlides: total number of slides
	});
	// It's important to bind the init event before initializing simpleSlider!

	$(".slider").simpleSlider();

	$(".slider").on("beforeSliding", function(event){
		// event.prevSlide: previous slide ID
		// event.newSlide: coming slide ID
	});

	$(".slider").on("afterSliding", function(event){
		// event.prevSlide: previous slide ID
		// event.newSlide: coming slide ID
	});

The afterSliding is triggered after the animation completed.

Examples

Simple-jQuery-Slider is used in the following websites. You can check them out if you want to see the slider in action!

Demo site #1

Supported browser

SimpleSlider has been tested in Chrome, Firefox, Safari and Internet Explorer 7+.