PlusSlider jQuery Plugin - Download

PlusSlider

A content slider that simply works...
The right way

I do not fear death,
in view of the fact that I had been dead
for billions and billions of years
before I was born, and had not suffered
the slightest inconvenience from it.
- Mark Twain


Features

Default Options

$('#slider').plusSlider({
    createArrows: true, // Creates forward and backward navigation
    nextText: 'Next', // The next button's text
    prevText: 'Previous', // The previous button's text

    createPagination: true, // Creates Numbered pagination
    paginationBefore: false, // Place the pagination above the slider within the HTML
    paginationWidth: true, // Automatically gives the pagination a dynamic width
    paginationTitle: false, // Checks for attribute 'data-title' on each slide and names the pagination accordingly
    paginationThumbnails: false, // Creates a thumbnail preview of the slide you hover over in the pagination. Note: To use this effectuively, make sure you're using the 'transform: scale(x,y) CSS property. Doesn't work in IE.
    
    displayTime: 4000, // The amount of time the slide waits before automatically moving on to the next one. This requires 'autoPlay: true'
    speed: 500, // The amount of time it takes for a slide to fade into another slide
    
    autoPlay: true, // Creats a times, looped 'slide-show'
    keyboardNavigation: true, // The keyboard's directional left and right arrows function as next and previous buttons
    pauseOnHover: true, // Autoplay does not continue ifsomeone hovers over Plus Slider.
    
    sliderEasing: 'linear', // Anything other than 'linear' and 'swing' requires the easing plugin
    sliderType: 'slider', // Choose whether the carousel is a 'slider' or a 'fader'
    
    width: false, // Overide the default CSS width
    height: false, // Overide the default CSS width
    
    onSlide: null // Callback function for you developers
});

Usage Instructions

Step 1 - Add the <head> scripts

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type='text/javascript' src='js/jquery.plusslider.1.1.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
	$('#slider').plusSlider();
});
</script>

Step 2 - Create a container div

<div id="mySlider">
		
</div>

Step 3 - Add Slides

Any child element will be a slide, even if it's an <a>, <div>, <img> or even <blockquote>. 

<div id="mySlider">
	<a href="#"><img src="image.jpg" alt="" /></a>
	<div class="slide2"><h2>Lorem Ipsum dolor</h2></div>
	<img src="image2.jpg" alt="" />
	<blockquote>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit,
		Phasellus ligula nibh, suscipit quis condimentum eleifend, 
		Lacinia a felis aenean erat nisl, tempus non ornare eu, 
		Commodo quis ipsum.
	<blockquote>
</div>

Step 4 - Relax

Your all done!

Customization

Controlling the height, width, colour, pagination and directional arrows

This is all with CSS and is easily & completely customized.

The pagination is numbered. text-indent has been used within my styling to hide them for aesthetic purposes.

Note: every slide should be equal in width and height which is why I've added the optional autofitContents javascript functionality.

Changelog

Version 1.3

Version 1.2.6

Version 1.2

Version 1.1

Version 1