Basic Responsive Carousel Slider Plugin For jQuery

A simple and easy-to-use jQuery slider plugin for create a basic content carousel with support for slide/fade transitions, transparent captions, automatic slide rotation, custom slider controls and user interactions.

How to use it:

1. Include the bjqs.css in the header that contains the *essential* CSS styles needed for the slider to work.

<link rel="stylesheet" href="bjqs.css">

2. Include the jQuery simple-slider plugin's script after jQuery library.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bjqs-1.3.min.js"></script>

3. Add a list of images to the slider and wrap them into a wrapper element can be anything you like.

<div id="my-slider">
  <ul class="bjqs">
    <li><img src="1.jpg" title="Caption 1"></li>
    <li><img src="2.jpg" title="Caption 2"></li>
    <li><img src="3.jpg" title="Caption 3"></li>
  </ul>
</div>

4. Call the plugin on the outer wrapper to create a basic image carousel slider which automatically generates image captions from title attribute of the img tags.

$('#my-slider').bjqs();

5. All the default settings.

// w + h to enforce consistency
width: 700,
height: 300,

// fade or slider
animtype: 'fade',

// length of transition
animduration: 450,

// delay between transitions
animspeed: 4000, 

// enable/disable automatic slide rotation
automatic: true, 

// enable/disable next + previous UI elements
showcontrols: true, 

// vertically center controls
centercontrols: true, 

// text/html inside next UI element
nexttext: 'Next',   

// text/html inside previous UI element
prevtext: 'Prev',   

// enable/disable individual slide UI markers
showmarkers: true,  

// horizontally center markers
centermarkers: true, 

// enable/disable keyboard navigation
keyboardnav: true,  

// enable/disable pause slides on hover
hoverpause: true, 

// enable/disable captions using img title attribute
usecaptions: true, 

 // start from a random slide
randomstart: false,

// enable responsive behaviour
responsive: false 

---

This awesome jQuery plugin is developed by hashmina. For more Advanced Usages, please check the demo page or visit the official website.