Basic jQuery Slider Basic jQuery Slider

Simple to use, simple to theme, simple to customise
You can download the plugin for free, however if you'd like
to support the ongoing hosting and development of the
plugin, you can optionally purchase it for $3 - the cost of
your morning coffee :)
 Purchase BJQS for $3 Purchase BJQS for $3
Download BJQS for Free Download BJQS for Free
Purpose Purpose
There are a lot of jQuery content sliders out there. Most of them are loaded with cool
features and skins, which are great if it’s exactly what you are looking for – but more
often than not you need to customise it for your own needs and it can be difficult cutting
through the bloat of a full featured slider.
Basic jQuery Slider has been developed to be as simple and lightweight as possible. Only
the essential functionality has been included combined with clean semantic mark-up. This
means instead of removing features and bending it to suit your needs, you can use this
slider and as a base and with a little bit of CSS and JavaScript knowledge, you can extend it
to be as feature rich, or as simple, as you need.
Download Download
Usage Usage
Pl ugi n dependanci es Pl ugi n dependanci es
There are two core files required to get up and running with Basic jQuery Slider – the
JavaScript plugin and the base css. The only dependancy is jQuery, so you will also need to
make sure you have the latest version of the jQuery library included in your page.
1 2 3
Automatically generated caption
Prev Next
converted by
<!-- Include the jQuery library (local or CDN) -->
<script src=""></script>
<!-- Include the plugin *after* the jQuery library -->
<script src="bjqs.min.js"></script>
<!-- Include the basic styles -->
<link type="text/css" rel="Stylesheet" href="bjqs.css" />
Markup Markup
The basic markup for the plugin is as follows.
An outer container which the plugin will be attached to,
An unordered list element with a class name of ‘bjqs’, and
Individual list elements for each slide.
<div id="my-slideshow">
<ul class="bjqs">
<li><!-- Any content you like --></li>
<li><!-- Can go inside these slides--></li>
Acti vati on Acti vati on
The final step is to invoke the plugin and attach it to the outer-most dom element. You can
then pass in a variety of key : value pairs to configure the slider.
jQuery(document).ready(function($) {
'height' : 320,
'width' : 620,
'responsive' : true
Options Options
Here is a full list of all the possible parameters which can used to configure the plugin and
their default values.
converted by
// width and height need to be provided to enforce consistency
// if responsive is set to true, these values act as maximum dimensions
width : 700,
height : 300,
// animation values
animtype : 'fade', // accepts 'fade' or 'slide'
animduration : 450, // how fast the animation are
animspeed : 4000, // the delay between each slide
automatic : true, // automatic
// control and marker configuration
showcontrols : true, // show next and prev controls
centercontrols : true, // center controls verically
nexttext : 'Next', // Text for 'next' button (can use HTML)
prevtext : 'Prev', // Text for 'previous' button (can use HTML)
showmarkers : true, // Show individual slide markers
centermarkers : true, // Center markers horizontally
// interaction values
keyboardnav : true, // enable keyboard navigation
hoverpause : true, // pause the slider on hover
// presentational options
usecaptions : true, // show captions for images using the image title tag
randomstart : true, // start slider at random slide
responsive : true // enable responsive capabilities (beta)
converted by