Flexible and Simple Image Slider Plugin - Bare Bones Slider

File Size: 408 KB
Views Total: 21149
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Flexible and Simple Image Slider Plugin - Bare Bones Slider

Bare Bones Slider is a lightweight and flexible jQuery Slider plugin that enables you to quickly create highly customizable image slider with lots of pre-coded options. It also can works with jQuery Easing Plugin for transition animations.


  • Autoplay.
  • 2 different kinds of pagination
  • Next and previous controls.
  • Transition animations.
  • Callback support.
  • Touch & Mouse drag events support.


$ npm install bare-bones-slider

Basic Usage (Slides play automatically.):

1. Include jQuery library,  easing.js (optional) and bbslider.js in the head section

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.bbslider.min.js"></script>

2. Include jquery bbslider CSS

<link type="text/css" href="css/jquery.bbslider.css" rel="stylesheet" />

3. Markup HTML structure

<div id="auto">
    <div><img src="1.jpg" alt="" /></div>
    <div><img src="2.jpg" alt="" /></div>
    <div><img src="3.jpg" alt="" /></div>

4. Call the plugin with some options.

  auto: true,

5. More Options with default values.


  // Page to start on
  start:            1,          

  // Duration of transition
  duration:       1000,                

  // Display next / prev controls
  controls:       false,    

  // HTML output for controls
          '<a class="prev control" href="#">Prev</a>',
          '<a class="next control" href="#">Next</a>'],           

  // Create clickable pagination links
  pager:          false,               

  // Container for pagination (Created externally)
  pagerWrap:      '.pager-wrap',      

  // HTML output for pager 
  pagerText:        pageTextDefault,     

  // Pages play automatically
  auto:           false,               

  // Amount of time for autoplay
  timer:          5000,                

  // Loop back to the beginning
  loop:           true,                

  // Fade, slide, slideVert, or none
  transition:     'fade',              

  // Callback function when slider is setup
  callbackStart:  null,                

  // Callback function before new slide transition
  callbackBefore: null,                

  // Callback function after new slide complete
  callbackAfter:  null,                

  // Callback function after update function
  callbackUpdate: null,                

  // Easing transition
  easing:         'ease',              

  // Automatically set height
  autoHeight:     true,                

  // Height of slider changes with current panel
  dynamicHeight:  false,               

  // Pause autoplay when controls or pagers used
  pauseOnHit:     true,                

  // Autoplay goes to random slides
  randomPlay:     false,               

  // Use backward and forward transition for loop
  loopTrans:      true,                

  // Allow touchscreen controls
  touch:          false,               

  // Amount of pixels to swipe for touch controls
  touchoffset:    50,                  

  // Allow mouse click and drag controls
  dragControls:   false,               

  // Amount of pixels to swipe for drag controls
  dragoffset:     50,                  

  // Number of items per slide
  carousel:       false,               

  // Amount of slides to move per carousel prev / next
  carouselMove:   1,

  // Image file for mask transition
  maskImage:        '/images/mask.png',  
  // Number of steps in mask image      
  maskSteps:        23,                        



  • v1.3.3: remove wrapper ID requirement for pager


  • v1.3.2: add mask transition; cleanup variables


  • v1.3.1: use variable for plugin name


  • v1.3.0: pager text empty


  • v1.2.9: JS update


  • v1.2.8: destroy remove panel styles


  • v1.2.7: rehaul navigation controls


  • v1.2.6: add mouse drag controls


  • v1.2.4: Dynamic height carousel


  • v1.2.3


  • works with jQuery 3.1+


  • plugin update


  • Added carousel

v1.1.8 (2014-10-20)

  • Added CSS3 transitions

v1.1.7 (2014-04-07)

  • version update

v1.1.6 (2014-01-28)

  • version update

v1.1.5 (2013-12-23)

  • fixed autoheight with blind dynamic content

v1.1.4 (2013-12-16)

  • Added vertical slide transition

v1.1.3 (2013-09-01)

  • fixed on-demand loading

v1.1.2 (2013-08-22)

  • add active class to panel

v1.1.1 (2013-06-23)

  • add touch controls

v1.0.10 (2013-05-09)

  • Added setup to methods to reduce duplicate code
  • Added custom controls demo

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