Pogo Slider Jquery Plugin
See http://fluice.com/pogo-slider for demos and further info
About
Pogo Slider is a jQuery plugin that allows you to create animated image/content sliders. CSS animations are used to transition between slides. A CSS animation can be triggered on element within a slide, after the slide transitions in, and as the slide transitions out.
About this fork
这里主要修复了一个在preserveTargetSize选项为True的情况下,blocksReveal无法正常工作的问题。 后续可能进行一些其他的改进。 (pogo-slider.min.js压缩的时候随便找了个压缩工具,所以和原版的不太相似)
Usage
markup
<div class="pogoSlider"> <div class="pogoSlider-slide" data-transition="slideOverLeft" data-duration="1000" style="background-image:url(#);"> <h2 class="pogoSlider-slide-element" data-in="slideDown" data-out="slideUp" data-duration="750" data-delay="500">Your Content Here!</h2> </div> <div class="pogoSlider-slide " data-transition="fold" data-duration="1000" style="background-image:url(#);"></div> </div><!-- .pogoSlider -->
Instantiating the plugin and calling the slider methods
var mySlider = $('.mySlider').pogoSlider(/* opts */).data('plugin_pogoSlider'); mySlider.pause(); // Pauses the slider on the current slide, only works if autoplay option set to true mySlider.resume(); // Resumes the slider back to normal operation mySlider.nextSlide(); // Transition to the next slide mySlider.prevSlide(); // Transition to the previous slide mySlider.toSlide(2); // Transitions to the slide index passes to the method mySlider.destroy(); // Destroys the plugin, restoring elements to their default state
Options
autoplay (Boolean)
When set to true, slides transition between one another automatically
autoplayTimeout (Integer)
The amount of time between a slide transitioning in ends and slide transition out starts. Only applied when autoplay is set to true
displayProgess (Boolean)
Creates a progress bar that displays the amount of time left until the current slide transitions out. Only applied when autoplay is set to true
baseZindex (Integer)
Used when setting the z-index of slides. Raise the Number if you need the slider to overlap another element
onSlideStart (Function)
Callback function that runs on slide start. Receives the index of the current slide
onSlideEnd (Function)
Callback function called on slide end. Receives the index of the current slide
onSliderPause (Function)
Callback function called when the slider has been paused, receives index of current slide
onSliderResume (Function)
Callback function called when the slider has resumed after being paused. Received the index of the current slide
slideTransition (String)
Sets the default slide transitions. Only used if the data-transition property has not been set on the slides element
slideTransitionDuration (Integer)
The default slide transitoins duration. Only used if the data-duration property has not been set on the slides element
elementTransitionStart (Integer)
The default element transition start time. Only used if the data-start property has not been set on an element
elementTransitionDuration (Integer)
The default element transition duration. Only used if the data-duration property has not been set on an element
elementTransitionIn (String)
The default element transition in animation. Only used if the data-in property has not been set on an element
elementTransitionOut (String)
The default element transition in animation. Only used if the data-out property has not been set on an element
generateButton (Boolean)
Generates next and previous buttons and sets the click event handlers
buttonPosition (String)
Where the buttons should be positionsed. Possible values:
- TopLeft
- TopRight
- BottomLeft
- BottomRight
- CenterHorizontal
- CenterVertical
generateNav (Boolean)
Generates a clickable nav item for each slide
navPosition (String)
Where the nav will be positioned. Possible values:
- Top
- Bottom
- Left
- Right
preserveTargetSize (Boolean)
Sets if the slider and all the elements should be scaled relative to the target size. Preserves the aspect ratio and allows you to style the slider and all the elements at a target size and have the that styling be preserved even when scaling to smaller devices.
responsive (Boolean)
If set to true, sets window resize handler to call the preserveTargetSize method if the slider is resized
targetWidth (Integer)
Used with the preserveTargetSize method to allow your slider to appear consistently across different screen sizes
targetHeight (Integer)
Used with the preserveTargetSize method to allow your slider to appear consistently across different screen sizes
pauseOnHover (Boolean)
Sets events handlers to pause and resume the slider on mouseover
Slide Transitions
Transitions can be set on each slide with the data-transition attribute. If no transitions is set on the slide, it will fallback to the transition set with slideTransition option
- fade
- slide
- verticalSlide
- slideLeft
- slideRight
- slideUp
- slideDown
- slideRevealLeft
- slideRevealRight
- slideOverLeft
- slideOverRight
- expandReveal
- shrinkReveal
- verticalSplitReveal
- horizontalSplitReveal
- zipReveal
- barRevealDown
- barRevealUp
- barReveal
- blocksReveal
- fold
- foldLeft
- foldRight
Element Animations
Animations can be set on each element with the data-in and data-out attributes. Falls back to the transition set in the elementTransitionIn and elementTransitionOut settings.
- slideDown
- slideUp
- slideRight
- slideLeft
- expand
- contract
- spin
- sideFall
- horizontal3DFlip
- vertical3DFlip
- 3DPivot
- rollLeft
- rollRight
- glideLeft
- glideRight
- flipX
- flipY
Creating your own element animations
You can define your own CSS animations to be triggered on an element. Each animation must be namespaced with 'pogoSlider-animation' and have both and in and out variant. The In animation is triggered when the slide transition starts, the Out animation is triggered as the slide transitions out
.pogoSlider-animation-slideDownIn { animation-name: animationInName; } .pogoSlider-animation-slideDownOut { animation-name: animationOutName; }