Submit your widget

bare-bones-slider - Bare Bones Slider is a minimalistic jQuery slider. The biggest strength of this slider isn't what it does; it's what it doesn't do. By default, there's very little bloat so developers can focus on adding new functio

Created 4 years ago   Views 2202   downloads 761    Author richardhung
View DemoDownload
17
Share |

Bare-Bones-Slider

Description: jQuery slider with little bloat but lots of customization.

Author: Richard Hung

More documentation and examples: http://www.bbslider.com

  • Carousel to show multiple slides simultaneously
  • Choice between CSS3 transitions and jQuery animations
  • Loads images on demand
  • Allows you to make your own pagination and controls
  • Public methods that you can call outside of the plugin
  • Variables can be retrieved at any time
  • Touch controls for phones

Bare Bones slider has a .js and a .css file in addition to the jQuery library. Optionally, you can include the easing plugin for animations.

<link type="text/css" href="css/jquery.bbslider.css" rel="stylesheet" media="screen" />
<script src="http://code.jquery.com/jquery-latest.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>

Create a container for the slider and children for the panels.

<div class="slider">
    <div><img src="images/image-1.jpg" alt="first image" /></div>
    <div><img src="images/image-2.jpg" alt="second image" /></div>
    <div><img src="images/image-3.jpg" alt="third image" /></div>
    <div><img src="images/image-4.jpg" alt="forth image" /></div>
    <div><img src="images/image-5.jpg" alt="fifth image" /></div>
</div>

Call the slider after the HTML markup and required files.

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