Easy Content Image Slider Plugin For jQuery bondSlider - Download Easy Content / Image Slider Plugin For jQuery - bondSlider

Download Easy Content / Image Slider Plugin For jQuery – bondSlider

By Posted on

This time I will share jQuery Plugin and tutorial about Easy Content / Image Slider Plugin For jQuery – bondSlider, hope it will help you in programming stack.

Easy Content Image Slider Plugin For jQuery bondSlider - Download Easy Content / Image Slider Plugin For jQuery - bondSlider
File Size: 2.4 MB
Views Total: 1898
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

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.

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

2. Create a basic automatic image slider.

view source
01 <div id="bondSlideBox">
02   <div class="cont">
03     <div class="bondWrapFrames">
04       <div class="bondFrames">
05         <div class="bondFrame">
06           <img src="1.jpg">
07         </div>
08         <div class="bondFrame">
09           <img src="2.jpg">
10         </div>
11         <div class="bondFrame">
12           <img src="3.jpg">
13         </div>
14       </div>
15     </div>
16   </div>
17 </div>
view source
1 $("#bondSlideBox").bondSlider();

3. Create a basic content slider with navigation controls.

view source
01 <div id="bondSlideBox">
02   <div class="cont">
03     <div class="bondWrapFrames">
04       <div class="bondFrames">
05         <div class="bondFrame">
06           Tetx 1
07         </div>
08         <div class="bondFrame">
09           Text 2
10         </div>
11         <div class="bondFrame">
12           Text 3
13         </div>
14       </div>
15     </div>
16   </div>
17 </div>
18  
19 <div class="bondNavi">
20   <a href="#" class="bondThumb">1</a>
21   <a href="#" class="bondThumb">2</a>
22   <a href="#" class="bondThumb">3</a>
23 </div>
view source
1 $("#bondSlideBox").bondSlider();

4. All configuration options.

view source
01 /* fd : {fast:"fast", normal:"normal", slow:"slow"},
02    tpL:{h:"horizontal", v:"vertical"},
03    tp:{opacity:"opacity",rotator:"rotator"},
04    dr:{next:"next",prev:"prev"},
05    typeBtn:{btn:"btn",navi:"navi", auto:"auto"},
06    sp: {slow: 600, fast: 200, normal: 400}
07 */
08 autoPlay: true,
09 autoPlayTime: 7000,
10 autoPlaySuspend: true,
11 loop: true,
12 distance: null,
13 activeFrame: 0,
14 sizeFrame: 1,
15 naviOverActive: false,
16 hideBtn: false,
17 hideBtnOpacity: 0,
18 hideBtnSpeed: c.fd.fast,
19 speedOpacity: c.fd.slow,
20 speedRotate: c.fd.slow,
21 typeBtn: c.tp.rotator,
22 typeThumb: c.tp.rotator,
23 typeAutoPlay: c.tp.rotator,
24 type<a href="https://www.jqueryscript.net/tags.php?/Scroll/">Scroll</a>er: c.tpL.h,
25 autoPlayDirect: c.dr.next,
26 effBtn: "linear",
27 effThumb: "linear",
28 effAutoPlay: "linear",
29 wrapFrames: "bondWrapFrames",
30 frames: "bondFrames",
31 frame: "bondFrame",
32 navi: "bondNavi",
33 thumb: "bondThumb",
34 next: "bondNext",
35 prev: "bondPrev",
36 disableBtn: "disable",
37 activeThumb: "activeThumb",
38 callbackChangeActFrame: null,
39 callbackClickFrame: null

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

source : jqueryscript.net

Related posts: