Welcome to 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 add new functionality without having to undo the plugin's "helpful" features. Beginners can use pre-coded options, while experts can control it using public methods.

Why should I use this slider?

• Carousel to show multiple slides simultaneously
• Uses CSS3 transitions with advanced easing
• Mask image for custom animations
• 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
• Has touch controls for phones
• Lots of options

How to install

1. Link files

Bare Bones slider has a .js and a .css file in addition to the jQuery library.

<!-- Include the stylesheet -->
<link type="text/css" href="css/jquery.bbslider.css" rel="stylesheet" media="screen" />

<!-- Include jQuery -->
<script src="http://code.jquery.com/jquery-latest.js"></script>

<!-- Include the slider plugin -->
<script type="text/javascript" src="js/jquery.bbslider.min.js"></script>

2. Create HTML

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>

3. Call the slider

Call the slider after the HTML markup.

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