jQuery Based Image Carousel with Fancy Slide Transition - Pogo Slider
File Size: | 1.17 MB |
---|---|
Views Total: | 6865 |
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.