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

Basic jQuery Slider

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)

<script type="text/javascript" src="js/libs/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/basic-jquery-slider.js"></script>

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.

<div id="my-slideshow">
	<ul class="bjqs">
		<li><!-- Any content you like --></li>
		<li><!-- Can go inside these slides--></li>

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.

    $('#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

Leave a Reply

Your email address will not be published. Required fields are marked *

10 − two =

This site uses Akismet to reduce spam. Learn how your comment data is processed.

You May Also Like

10+ Useful jQuery Scrollbar Plugins

jQuery scrollbar plugins makes it possible to add cool scrollbars to content areas within your pages. This can be really useful in some cases but should also be used with great care.

qTip2 – Advanced jQuery Tooltip Plugin

qTip2 plugin can display the tooltip in any position wanted, plays nicely with image maps and they can be set to follow any element (handy for drag 'n' dropped and animated items) or mouse.

Text Resizing With jQuery

Want to allow visitors to increase or decrease the text size (font size) on your website? I’m going to show you how - using jQuery (a great JavaScript library).