PlusSlider jQuery Plugin (Last modified 09 August 2012)

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({
/* General */
sliderType          : 'slider', // Choose whether the carousel is a 'slider' or a 'fader'
infiniteSlide       : true, // Gives the effect that the slider doesn't ever "repeat" and just continues forever
disableLoop         : false, // Disables prev or next buttons if they are on the first or last slider respectively. 'first' only disables the previous button, 'last' disables the next and 'both' disables both
fullWidth           : false, // sets the width of the slider to 100% of the parent container
width               : null, // Set the width of the slider
height              : null, // Set the height of the slider

/* Display related */
defaultSlide        : 0, // Sets the default starting slide - Number based on item index
displayTime         : 4000, // The amount of time the slide waits before automatically moving on to the next one. This requires 'autoPlay: true'
sliderEasing        : 'linear', // Anything other than 'linear' and 'swing' requires the easing plugin
speed               : 500, // The amount of time it takes for a slide to fade into another slide

/* Functioanlity related */
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.

/* Arrow related */
createArrows        : true, // Creates forward and backward navigation
arrowsPosition      : 'prepend', //Where to insert arrows in relation to the slider ('before', 'prepend', 'append', or 'after')
nextText            : 'Next', // Adds text to the 'next' trigger
prevText            : 'Previous', // Adds text to the 'prev' trigger

/* Pagination related */
createPagination    : true, // Creates Numbered pagination
paginationPosition  : 'append', // Where to insert pagination in relation to the slider element ('before', 'prepend', 'append', or 'after')
paginationWidth     : false, // Automatically gives the pagination a dynamic width
paginationTitle     : false, // Checks for attribute 'data-title' on each slide and names the pagination accordingly

/* Callbacks */
onInit              : null, // Callback function: On slider initialize
onSlide             : null, // Callback function: As the slide starts to animate
afterSlide          : null, // Callback function: As the slide completes the animation
onSlideEnd          : null // Callback function: Once the slider reaches the last slide

});

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.4.6

Version 1.4.5

Version 1.4.2

Version 1.4

Version 1.3

Version 1.2.6

Version 1.2

Version 1.1

Version 1