Home    Articles


The most simple and responsive slider with jQuery


Recently I needed a slider for some projects, the slider should be very simple and easy to be integrated.
After a quick search, I found a free slider. The slider is opensource, easy to integrate (about 2 min) and has lots of options.

The slider has been developed by the guys from basic-slider.com
This is how the slider looks:

The slider can be downloaded from our website by clicking here or from their website.

The instructions for using this slider are very simple:

1. Include the required files

<!-- Include the jQuery library (local or CDN) -->
<script src="http://code.jquery.com/jquery-latest.min.js"></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" />

2. Make the slideshow container

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

3. Activate the slider by calling the jQuery function

jQuery(document).ready(function($) {
        'height' : 320,
        'width' : 620,
        'responsive' : true

For more, visit basic-slider.com
That’s all. Enjoy.