jQuery Based Image Carousel with Fancy Slide Transition - Pogo Slider

jQuery Based Image Carousel with Fancy Slide Transition - Pogo Slider
File Size: 1.17 MB
Views Total: 6428
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.