🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

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.

Carousel Image-Slider

Documentation

Bare-Bones-Slider

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

Author: Richard Hung

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

Install

Install it using Bower:

$ bower install bare-bones-slider

Install it using npm:

$ npm install bare-bones-slider

Or download as ZIP.

Key Features

  • 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
  • Touch controls for phones

How to Use

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

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

You May Also Like