Basic Responsive Image Slider with jQuery - JBLSlider

JBLSlider is a small jQuery plugin to create an infinite-looping, fully responsive image slider with minimal effort.

How to use it:

1. Load the required jquery.jblSlider.css in the head section of your document.

<link rel="stylesheet" href="css/jquery.jblSlider.css">

2. Load the jquery.jblSlider.js after jQuery JavaScript library.

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

3. Add your pictures as background image into the slider and wrap the captions into span elements.

<div class="slider" id="jblslider">

  <div class="slide" style="background-image: url('1.jpg')">
    <span>Slide 1</span> 
  </div>

  <div class="slide" style="background-image: url('2.jpg')">
    <span>Slide 2</span>
  </div>

  <div class="slide" style="background-image: url('3.jpg')">
    <span>Slide 3</span>
  </div>
   
  ...

</div>

4. Initialize the image slider.

$("#jblslider").jblSlider();

5. Setup the image slider by passing the options during initialization.

$("#jblslider").jblSlider({

safe_area: 640,
duration: 1000,
delay: 5000,
resume: 20000

});

Change logs:

2015-09-25

• Remove slide animation type and animation type option (because ugly).
• Move width and height calculation to css. Enables 100% width. 
• Remove option for width and height from slider call.

2015-07-03

• Re-coded slider. Added safe area option to set min-width before slide shrinks

2015-05-02

• Added fading animation option

2015-02-17

• Upgrade animation to requestAnimationFrame with setInterval fallback shim and removed log spam.

2015-02-15

• corrected slider animation directionsd

2015-02-14

• options fixes

2015-02-13

• Fixed: slider y pos, default options overwriting user options.

2015-02-12

• fixed for IE 9/10.

---

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