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 *

three × five =

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

You May Also Like

Detect screen size with jQuery and apply a CSS style

Sometimes we need to format the content differently according to the screen resolution of the user. One of the ways to do this is to simply detect the screen width using the screen.width property and change the stylesheet.