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>
	</ul>
</div>

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

0 Shares:
Leave a Reply

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

2 × two =

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

You May Also Like

jQuery: Setting cookies

Setting and clearing cookies with jQuery is really easy but it's not included in the jQuery core and requires a plug-in. This post shows how to set, get the value of and clear cookies with jQuery.

Spectrum – Perfect jQuery Color Picker Plugin

Spectrum is a jQuery colorpicker plugin that probably comes with all the features you are looking for. It is image-free (only CSS and JS) and can be used for all browsers or only as a polyfill for the input[type=color] of HTML5.