Pogo Slider – jQuery 動畫滑塊插件

jopen 9年前發布 | 18K 次閱讀圖片展示jQuery插件 jQuery插件 Pogo Slider

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