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.

Features:

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

Installation:

# NPM
$ 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>
</div>

4. Call the plugin with some options.

$('#auto').bbslider({
  auto: true,
  timer:3000,
  loop:true
});

5. More Options with default values.

$('#auto').bbslider({

  // Page to start on
  start:            1,          

  // Duration of transition
  duration:       1000,                

  // Display next / prev controls
  controls:       false,    

  // HTML output for controls
  controlsText:[                         
          '<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,                        
          
});

Changelog:

2018-11-19

• v1.3.3: remove wrapper ID requirement for pager

2018-10-10

• v1.3.2: add mask transition; cleanup variables

2018-04-04

• v1.3.1: use variable for plugin name

2018-01-23

• v1.3.0: pager text empty

2017-10-11

• v1.2.9: JS update

2017-09-06

• v1.2.8: destroy remove panel styles

2017-07-24

• v1.2.7: rehaul navigation controls

2017-06-25

• v1.2.6: add mouse drag controls

2016-11-27

• v1.2.4: Dynamic height carousel

2016-10-21

• v1.2.3

2016-09-15

• works with jQuery 3.1+

2015-02-25

• plugin update

2014-11-10

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