Pogo Slider

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.

Slide Transition Demos

slide

slide

slide

blocksReveal

blocksReveal

blocksReveal

verticalSplitReveal

verticalSplitReveal

verticalSplitReveal

zipReveal

zipReveal

zipReveal

shrinkReveal

shrinkReveal

shrinkReveal

expandReveal

expandReveal

expandReveal

fold

fold

fold

verticalSlide

verticalSlide

verticalSlide

fade

fade

fade

Slide Reveal Left

Slide Reveal Left

Slide Reveal Left

Slide Over Left

Slide Over Left

Slide Over Left

Bars Reveal Down

Bars Reveal Down

Bars Reveal Down

Element Transition Demos

Click to transition

slideDown

slideUp

slideRight

slideLeft

expand

contract

spin

sideFall

horizontal3DFlip

vertical3DFlip

3DPivot

rollLeft

rollRight

glideLeft

glideRight

flipX

flipY

Usage

Pogo slider does not generate any navigation buttons. It provides a simple api to control the slider and you can use this api when creating your own buttons. It does however provide some default button styling classes.

Example Markup

HTML

<div class="pogoSlider">

				    <div class="pogoSlider-slide" data-transition="slideOverLeft" data-duration="1000"  style="background-image:url(img/slide1.jpg);">
				        <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(img/slide2.jpg);"></div>

				</div><!-- .pogoSlider -->

Javascript

$(document).ready(function () {

				    var mySlider = $('.my-slider').pogoSlider().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

Option Type Default Explanation
autoplayTimeout Number 4000 The amount of time between a slide transitioning in ends and slide transition out starts. Only applied when autoplay is set to true
autoplay Boolean true When set to true, slides transition between one another automatically
displayProgess Boolean true 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 Number 1 Used when settings the z-index of slides. Raise the number if you need the slider to overlap another element
onSlideStart function null Callback function that runs on slide start. Receives the index of the current slide.
onSlideEnd function null Callback called on slide end. Receives the index of the current slide.
onSliderPause function null Callback function called when the slider has been paused, receives index of current slide
onSliderResume function null Callback function called when the slider has resumed after being paused. Received the index of the current slide
slideTransition string 'slide' Sets the default slide transitions. Only used if the data-transition property has not been set on the slides element
slideTransitionDuration number 1000 The default slide transitoins duration. Only used if the data-duration property has not been set on the slides element
elementTransitionStart number 500 The default element transition start time. Only used if the data-start property has not been set on an element
elementTransitionDuration number 1000 The default element transition duration. Only used if the data-duration property has not been set on an element
elementTransitionIn string 'slideUp' The default element transition in animation. Only used if the data-in property has not been set on an element
elementTransitionOut string 'slideDown' The default element transition in animation. Only used if the data-out property has not been set on an element
generateButtons Boolean true Generates next and previous buttons and sets the click event handlers
buttonPosition String 'CenterHorizontal' Where the buttons should be positionsed. Possible values:
  • TopLeft
  • TopRight
  • BottomLeft
  • BottomRight
  • CenterHorizontal
  • CenterVertical
generateNav Boolean true Generates a clickable nav item for each slide
navPosition String 'Bottom' Where the nav will be positioned. Possible values:
  • Top
  • Bottom
  • Left
  • Right
preserveTargetSize Boolean false 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 false If set to true, sets window resize handler to call the preserveTargetSize method if the slider is resized
targetWidth Integer 1000 Used with the preserveTargetSize method to allow your slider to appear consistently across different screen sizes
targetHeight Integer 300 Used with the preserveTargetSize method to allow your slider to appear consistently across different screen sizes
pauseOnHover Boolean true Sets events handlers to pause and resume the slider on mouseover