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>

Last but not least you need to reference the class/id you have for your slider and you should be up and running.

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

Before you leave

I know, "another newsletter pitch" - but hear me out. Most JavaScript newsletters are terrible. When's the last time you actually looked forward to getting one? Even worse, when's the last time you actually read one rather than just skim it?

We wanted to change that, which is why we created Bytes. The goal was to create a JavaScript newsletter that was both educational and entertaining. 101,890 subscribers and an almost 50% weekly open rate later, it looks like we did it.

Delivered to 101,890 developers every Monday