Refine Slide

RefineSlide is a simple jQuery plugin for displaying responsive, image-based content (with shiny animations). CSS transitions are used wherever possible, which currently makes for varied performance across browsers and platforms. At the moment it’s probably best to check it out in Safari, and will become much smoother elsewhere as other browsers move towards offloading CSS transitions to the GPU.

It’s very simple to get it up and running as well. Simply add the CSS to the head of your HTML and the javascript file before the closing </body> tag (along with jQuery) and you’re half way done.

The HTML markup is as you would expect, you need to make sure there’s a class or an id to select is from

<ul class="rs-slider">
    <li><img src="img1.jpg" alt="" /></li>
    <li><img src="img2.jpg" alt="" /></li>
    <li><img src="img3.jpg" alt="" /></li>
</ul>

<script>
    $(document).ready(function () {
        $('.rs-slider').refineSlide();
    });
</script>