Easy Responsive Content Slider Plugin For jQuery - bSlider

bSlider is a plain, easy-to-use jQuery plugin for creating an any content slider with straightforward markup structure.

Features:

• Fully responsive layout according to your screen size.
• Auto sliding when page loads.
• Sticky left/right arrows navigation.
• Custom animations: slide or fade.
• Auto adjusts slider height after item switch
• Callback functions.

TODO:

• bullets support
• autoswitch postponing
• disabling loop

How to use it:

1. Import jQuery library and bslider.jquery.js script at the end of the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="bslider.jquery.js"></script>

2. The markup structure to create a background image slider with inner sticky left/right controls.

<div class="bslider slider-normalw slider-demo">
  <div class="window">
  	<div class="frame">
      <div class="item" style="background-image: url(1.jpg)"></div>
      <div class="item" style="background-image: url(2.jpg)"></div>
      <div class="item" style="background-image: url(3.jpg)"></div>
  	</div>
  </div>
  <div class="controls controls-wide">
    <div class="left">&laquo;</div>
    <div class="right">&raquo;</div>
  </div>
</div>

3. Add the following styles into your CSS file.

.bslider { position: relative; }

.bslider .window { overflow: hidden; }

.bslider .item {
  position: relative;
  float: left;
  height: 320px;
}

.bslider .frame {
  position: relative;
  overflow: hidden;
}

.slider-normalw {
  max-width: 640px;
  margin: auto;
}

.controls {
  font-size: 48px;
  line-height: 48px;
}

.controls-wide {
  position: absolute;
  top: 140px;
}

.controls-wide .right,
.controls-wide .left {
  width: 50px;
  position: absolute;
  text-align: center;
  background: rgba(255, 255, 255, 0.5);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

.controls-wide .right { right: 0px; }

4. Initialize the plugin with default options.

$('.slider-demo').bSlider();

5. Available options.

speed: 500, // sets item speed
auto: false, // allow auto switching. False for disabling, int for delay in ms
autoHeight: true, // adjust slider height after item switch
itemMaxWidth: false, // set window width as item width (width 100% is not posible since frame width is sum of items width )
controlsMaxWidth: false, // controlls element gets 100% width
step: false, // length of one move. false for item width, int for pixel
onFinishStop: false,
left: false, // example '#left-buttom' jQuery selector for left control, false if is used default DOM structure as above
right: false, // example '#right-buttom' jQuery selector for right control, false if is used default DOM structure as above
stepCount: 1, // int, how many items are slided. Default value 1
method: 'slide', // slide or fade
onReady: function(slider, settings) {},
onSlideBegin: function(slider, settings, active) {},
onSlideComplete: function(slider, settings) {},
onFinish: function(slider, settings) {}

---

This awesome jQuery plugin is developed by jBenes. For more Advanced Usages, please check the demo page or visit the official website.