Easy Content / Image Slider Plugin For jQuery - bondSlider

bondSlider is a simple, flexible jQuery slider used to showcase your images or html contents in a fully customizable rotating slider.

Features:

• Vertical and horizontal sliding.
• Allows the user to slide through any html content automatically or by clicking the navigation controls.
• Infinite looping like a carousel.
• Lightweight and easy to use.

Basic usage:

1. Add the latest version of the jQuery bondSlider plugin after jQuery JavaScript library.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="lib/1.8/jquery.bondSlider-1.8.js"></script> 

2. Create a basic automatic image slider.

<div id="bondSlideBox">
  <div class="cont">
    <div class="bondWrapFrames">
      <div class="bondFrames">
        <div class="bondFrame"> 
          <img src="1.jpg"> 
        </div>
        <div class="bondFrame"> 
          <img src="2.jpg"> 
        </div>
        <div class="bondFrame"> 
          <img src="3.jpg"> 
        </div>
      </div>
    </div>
  </div>
</div>

$("#bondSlideBox").bondSlider();

3. Create a basic content slider with navigation controls.

<div id="bondSlideBox">
  <div class="cont">
    <div class="bondWrapFrames">
      <div class="bondFrames">
        <div class="bondFrame"> 
          Tetx 1 
        </div>
        <div class="bondFrame"> 
          Text 2
        </div>
        <div class="bondFrame"> 
          Text 3
        </div>
      </div>
    </div>
  </div>
</div>

<div class="bondNavi">
  <a href="#" class="bondThumb">1</a>
  <a href="#" class="bondThumb">2</a>
  <a href="#" class="bondThumb">3</a>
</div>

$("#bondSlideBox").bondSlider();

4. All configuration options.

/* fd : {fast:"fast", normal:"normal", slow:"slow"},
   tpL:{h:"horizontal", v:"vertical"},
   tp:{opacity:"opacity",rotator:"rotator"},
   dr:{next:"next",prev:"prev"},
   typeBtn:{btn:"btn",navi:"navi", auto:"auto"},
   sp: {slow: 600, fast: 200, normal: 400}
*/
autoPlay: true,
autoPlayTime: 7000,
autoPlaySuspend: true,
loop: true,
distance: null,
activeFrame: 0,
sizeFrame: 1,
naviOverActive: false,
hideBtn: false,
hideBtnOpacity: 0,
hideBtnSpeed: c.fd.fast,
speedOpacity: c.fd.slow,
speedRotate: c.fd.slow,
typeBtn: c.tp.rotator,
typeThumb: c.tp.rotator,
typeAutoPlay: c.tp.rotator,
typeScroller: c.tpL.h,
autoPlayDirect: c.dr.next,
effBtn: "linear",
effThumb: "linear",
effAutoPlay: "linear",
wrapFrames: "bondWrapFrames",
frames: "bondFrames",
frame: "bondFrame",
navi: "bondNavi",
thumb: "bondThumb",
next: "bondNext",
prev: "bondPrev",
disableBtn: "disable",
activeThumb: "activeThumb",
callbackChangeActFrame: null,
callbackClickFrame: null

---

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