National Public Mania

    pogo-slider

    0.7.0 • Public • Published

    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.

    Usage

    markup

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

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

    Install

    npm i pogo-slider

    DownloadsWeekly Downloads

    2

    Version

    0.7.0

    License

    MIT

    Last publish

    Collaborators

    • mdgriffin