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
JS Tutorial
