Pogo Slider Jquery Plugin

Download   Demo

Pogo Slider is a jQuery animated slider plugin which allows to cycle through a set of background images with a variety of CSS3 based slide transitions.

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="../pogo-slider.min.css">
<script src="js/vendor/jquery-1.11.1.min.js"></script>
<script src="../jquery.pogo-slider.min.js"></script>

2. HTML

<div class="pogoSlider" id="js-main-slider">
	<div class="pogoSlider-slide" data-transition="slideOverLeft" data-duration="1000" style="background-image:url(img/slide1.jpg);"></div>
	<div class="pogoSlider-slide " data-transition="fold" data-duration="1000" style="background-image:url(img/slide2.jpg);"></div>
	<div class="pogoSlider-slide " data-transition="shrinkReveal" data-duration="1000" style="background-image:url(img/slide3.jpg);"></div>
</div>

3. JAVASCRIPT

$('#js-main-slider').pogoSlider(
	autoplay: true,
	autoplayTimeout: 5000,
	displayProgess: true,
	preserveTargetSize: true,
	targetWidth: 1000,
	targetHeight: 300,
	responsive: true
).data('plugin_pogoSlider');

4. OPTIONS

autoplayTimeout: 4000,
autoplay: true,
baseZindex: 1,
displayProgess: true,
onSlideStart: null,
onSlideEnd: null,
onSliderPause: null,
onSliderResume: null,
slideTransition: 'slide',
slideTransitionDuration: 1000,
elementTransitionStart: 500,
elementTransitionDuration: 1000,
elementTransitionIn: 'slideUp',
elementTransitionOut: 'slideDown',
generateButtons: true,
buttonPosition: 'CenterHorizontal',
generateNav: true,
navPosition: 'Bottom',
preserveTargetSize: false,
targetWidth: 1000,
targetHeight: 300,
responsive: false,
pauseOnHover: true

Pogo Slider Jquery Plugin