Flexible and Simple Image Slider Plugin - Bare Bones Slider

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

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
  page:           1,                   

  // Duration of transition
  duration:       1000,                

  // Display next / prev controls
  controls:       false,               

  // Create clickable pagination links
  pager:          false,               

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

  // Display current panel information
  pageInfo:       false,               

  // Container for page information (Created externally)
  infoWrap:       '.info-wrap',        

  // Create placeholder image and load on-demand
  onDemand:       false,               

  // Location of placeholder image
  placeholder:    '/images/blank.gif', 

  // 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            
          
});

Change Logs:

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.