Customizable Content Slider - Basic jQuery Slider

Basic jQuery Slider is a non-complicated and lightweight (4.6kb minified)content slider plugin that can present any HTML content. It is not feature-rich and includes only the essential functionality combined with clean semantic mark-up.

• Easy to use, easy to theme, easy to customise.


• A simple, no-frills, robust jQuery plugin for creating beautiful slideshows for your featured content.

• Slides can contain any valid HTML markup


• Allows both slide and fade animations


• Supported in all major browsers


• Easy to theme and customise for any project


• Supports keyboard navigation


• Super lightweight, weighs in at 4.6kb minified


• Completely free to use

There are 2 built-in animation types: fade + slide and navigation can be accomplished with prev-next controls, buttons and keyboard.

And, settings like rotation speed, animation duration and pause on hover exist for a better customization.

How to use the slider

Step 1: Incude the jQuery library (self hosted or from the google CDN) and the plugin in your document header (or footer)

Step 2: Drop in the markup for the slider. All that is required is a container element wrapped around an unordered list with the class 'bjqs'. The list elements will become your slides and can contain images, video or any valid html mark-up.

Step 3: Activate the plug-in on your container element and adjust the settings as required. The full list of avaliable options are documented in the plug-in.

$(document).ready(function(){

$('#my-slideshow').bjqs({

'width' : 940,

'height' : 340,

'showMarkers' : true,

'showControls' : true,

'centerMarkers' : false

});

});

Step 4: Theme and customise the slider to your hearts content!

Requirements: jQuery
Compatibility: All Major Browsers
Website: http://basic-slider.com/
Download: https://github.com/jcobb/basic-jquery-slider