jQuery Pogo Slider con control de transiciones

DESCARGA : jQuery Pogo

jQuery Pogo Slider con control de transiciones, jQuery Pogo Slider , es un slider que te permite crear sliders de imágenes/ contenidos animados, la principal ventaja es que te permite personalizar los efectos de transición, eso marca la diferencia con respecto a otros plugins, cuando generas la vista final del slider este puede aplicar efectos entre cambio de presentación.

La API (Application Programming Interface) permite crear de una manera rápida el control de los sliders así, como los botones de igual forma el plugin ofrece también sus propios componentes, en caso que no manejes un diseño propio.

Puedes ver un ejemplo del uso y de las diferentes transiciones: http://fluice.com/pogo-slider/

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

Utilizando el código 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

 });

Puedes encontrarte también con las diferentes opciones que maneja el plugin.

Como:

  1. autoplayTimeout
  2. autoplay
  3. displayProgess

Entre otras, puedes ver la documentación completa en el siguiente enlace:

http://fluice.com/pogo-slider/

You may also like...