Refine Slide | Responsive Web Design

Refine Slide

Refine Slide Responsive Image Slider
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>
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>
  • Resource Name

    Refine Slide

  • Resource Creator

    Alex Dunphy

Description

RefineSlide is a simple jQuery plugin for displaying responsive, image-based content (with shiny animations).

View on Github Download Resource

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.