Pogo Slider – jQuery 动画滑块插件
jopen
9年前
Pogo Slider 是一个 jQuery 插件能够让你创建一个具有动画效果图片/内容sliders。CSS 动画应用于不同slides之间的切换。
<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 