Basic Responsive Image Slider with jQuery - JBLSlider

File Size: 0.99 MB
Views Total: 4492
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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 class="slide" style="background-image: url('2.jpg')">
    <span>Slide 2</span>

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


4. Initialize the image slider.


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


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


Change logs:


  • 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.


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


  • Added fading animation option


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


  • corrected slider animation directionsd


  • options fixes


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


  • 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.