Post Tags

jQuery Slider

Pretty posts

Live Demo Download

It's called Pogo Slider. Pogo Slider is a multiple animated slider plugin for image/content sliders. CSS animations are used to transition between slides. A CSS animation can be triggered on element within a slide, after the slide transitions in, and as the slide transitions out.

HTML
 <div class="pogoSlider">

  <div class="pogoSlider-slide" data-transition="slideOverLeft" data-duration="1000"  style="background-image:url(img/slide1.jpg);">
   <h2 class="pogoSlider-slide-element" data-in="slideDown" data-out="slideUp" data-duration="750" data-delay="500">
    Your Content Here!
   </h2>
  </div>
  <div class="pogoSlider-slide " data-transition="fold" data-duration="1000"  style="background-image:url(img/slide2.jpg);"></div>

 </div>

JAVASCRIPT

$(document).ready(function () {

 var mySlider = $('.my-slider').pogoSlider().data('plugin_pogoSlider');

 mySlider.pause(); // Pauses the slider on the current slide, only works if autoplay option set to true

 mySlider.resume(); // Resumes the slider back to normal operation

 mySlider.nextSlide(); // Transition to the next slide

 mySlider.prevSlide(); // Transition to the previous slide

 mySlider.toSlide(2); // Transitions to the slide index passes to the method

 mySlider.destroy(); // Destroys the plugin, restoring elements to their default state

});

autoplay (Boolean): When set to true, slides transition between one another automatically

autoplayTimeout(4000): The amount of time between a slide transitioning in ends and slide transition out starts. Only applied when autoplay is set to true

displayProgess (Boolean): Creates a progress bar that displays the amount of time left until the current slide transitions out. Only applied when autoplay is set to true

baseZindex (Integer): Used when settings the z-index of slides. Raise the number if you need the slider to overlap another element

Read More: https://github.com/mdgriffin/pogo-slider