jQuery Based Image Carousel with Fancy Slide Transition - Pogo Slider

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

How to use it:

1. Include the jQuery Pogo Slider's CSS in the head section.

<link rel="stylesheet" href="pogo-slider.min.css">

2. Include jQuery library and the jQuery Pogo Slider's script at the bottom.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.pogo-slider.min.js"></script>

3. Add background images into DIV elements and use data-OPTION attributes to customize the transition effects for each slide.

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

4. To initialize the image slider, just call the plugin on the parent element.

$(document).ready(function () {
$('#slider-demo').pogoSlider({
  autoplay: true,
  autoplayTimeout: 5000,
  displayProgess: true,
  preserveTargetSize: true,
  targetWidth: 1000,
  targetHeight: 300,
  responsive: true
}).data('plugin_pogoSlider');
});

5. All the default 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

Change logs:

2016-04-27

• further fix on the background-size attr

2015-04-29

• Fixed layer ordering error

2014-09-12

• Fixed indentation
• Removed unnecessary slide index check from slide transition methods

---

This awesome jQuery plugin is developed by mdgriffin. For more Advanced Usages, please check the demo page or visit the official website.