Flexible and Simple Image Slider Plugin - Bare Bones Slider

Flexible and Simple Image Slider Plugin - Bare Bones Slider
File Size: 386 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

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

<script type="text/javascript">
$(document).ready(function() {
	$('#auto').bbslider({
		auto: true,
		timer:3000,
		loop:true
	});
});
</script>

5. More Options

Option Default Description
autoHeight true Automatically sets the height to the largest panel.
page 1 The panel to start on.
duration 1000 Duration of transition animation.
easing "swing" Easing of transition animation.
controls false Creates prev/next controls.
pager false Creates pagination.
pagerWrap ".pager-wrap" The element to append the pager to.
pageInfo false Display "(current slide) of (total slides)"
infoWrap ".info-wrap" The element to append the page info to.
onDemand false Loads images as slides are viewed.
placeholder "/images/blank.gif" The placeholder image for images not loaded.
auto false Panels play automatically.
timer 5000 Timer between slides for auto play.
loop false Loops to beginning and end when controls are hit.
loopTrans true Use the forward animation when looping back to beginning.
transition fade Transition effects between slides.
callback null Function to run after every slide
pauseOnHit true Pause autoplay when someone uses controls or pager

Change Logs:

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

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.