Submit your widget

Super cool Multiple jQuery animated slider plugin

Created 5 years ago   Views 15607   downloads 3537    Author mdgriffin
Super cool Multiple jQuery animated slider plugin
View DemoDownload 1.2 MB
Share |

Pogo Slider is a jQuery plugin that allows you to create animated 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.


<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!
				    <div class="pogoSlider-slide " data-transition="fold" data-duration="1000"  style="background-image:url(img/slide2.jpg);"></div>

				</div><!-- .pogoSlider -->


$(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 (Integer)

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 setting the z-index of slides. Raise the Number if you need the slider to overlap another element

Read more: