Slider

Basic (.zb-slider)


 
...
...

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias laboriosam, obcaecati laudantium provident,

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias laboriosam, obcaecati laudantium provident,

With control (.bwd, .fwd, .bullets)

Forward & Backward


 <div class="zb-slider"> 

    <img src="">
    <div>...<div>
    <img src="">
    <div>...<div>

    <div class="bwd"></div>
    <div class="fwd"></div>

 </div>

					 	

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias laboriosam, obcaecati laudantium provident,

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias laboriosam, obcaecati laudantium provident,

Bullets


 <div class="zb-slider"> 

    <img src="">
    <div>...<div>
    <img src="">
    <div>...<div>

    <div class="bullets"></div>

 </div>

					 	

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias laboriosam, obcaecati laudantium provident,

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias laboriosam, obcaecati laudantium provident,

Custom


 
...
...
prev
next

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias laboriosam, obcaecati laudantium provident,

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias laboriosam, obcaecati laudantium provident,
prev
next

 
...
...
1
2
3
4

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias laboriosam, obcaecati laudantium provident,

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias laboriosam, obcaecati laudantium provident,
1
2
3
4

Turn off autoplay [zb-off]


 <div class="zb-slider" zb-off> 

    <img src="">
    <div>...<div>
    <img src="">
    <div>...<div>

    <div class="bwd"></div>
    <div class="fwd"></div>
    <div class="bullets"></div>

 </div>

					 	

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias laboriosam, obcaecati laudantium provident,

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias laboriosam, obcaecati laudantium provident,

Slider interval [zb-interval]


 <div class="zb-slider" zb-interval="2000"> 

    <img src="">
    <div>...<div>
    <img src="">
    <div>...<div>

    <div class="bwd"></div>
    <div class="fwd"></div>
    <div class="bullets"></div>

 </div>

					 	

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias laboriosam, obcaecati laudantium provident,

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias laboriosam, obcaecati laudantium provident,

Slider style (.fade, .up-n-down)


 <div class="zb-slider" zb-interval="3000"> 

    <img src="">
    <div>...<div>
    <img src="">
    <div>...<div>

    <div class="bwd"></div>
    <div class="fwd"></div>
    <div class="bullets"></div>

 </div>

					 	

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias laboriosam, obcaecati laudantium provident,

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias laboriosam, obcaecati laudantium provident,
.fade
.up-n-down
Default

Alignement .top, .bottom


 
...
...

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias laboriosam, obcaecati laudantium provident,

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias laboriosam, obcaecati laudantium provident,

Slider Class

To get access to one of your Slider instance just add an id to your slider and call it with the static method Slider.get(id).
Then you can use a bunch of method to controle your instance: .play(), .pause(), .forward(), .backward(), .setIterator(i).


 <div id="mySliderId" class="zb-slider" zb-interval="2000" zb-off> 

    <img src="">
    <div>...<div>
    <img src="">
    <div>...<div>

 </div>

 <div id="play" class="btn">Play</div>
 <div id="pause" class="btn">Pause</div>
 <div id="bwd" class="btn">Backward</div>
 <div id="fwd" class="btn">Forward</div>


 <script>


   // Get your instance by id  
   var  myslider= Slider.get("mySliderId");

   // Then you can use a bunch of method 
   $('#play').click( function(){
      myslider.play();
   });
   $('#pause').click( function(){
      myslider.pause();
   });
   $('#backward').click( function(){
      myslider.backward();
   });
   $('#forward').click( function(){
      myslider.forward();
   });

 </script>

					 	

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias laboriosam, obcaecati laudantium provident,

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias laboriosam, obcaecati laudantium provident,
Play
Pause
Backward
Forward
Coming soon

Oops sorry!!!

This content is not available yet.