article:
eCSSential
article:
Plugin: Scrolling Parallax

Plugin: Refine Slide

Advertisement

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.


Refine Slide


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.


Features

A few transitions to play with

- Responsive down to mobile scale
- CSS transition & 3D transform support
- Javascript fallback fade transition
- Auto-formatted, responsive thumbnails
- Good browser support (IE7+)
- HTML captions
- Hardware acceleration on supported browsers
- Free to use and abuse as you like
- Simple, semantic markup
- Lightweight: 12k minified (4k gzipped)



Link JS

Move the slider JS file to your server and link to it before the closing <body> tag. Please note that you must include jQuery (v1.7 or later) before the slider JS file.

<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.refineslide.min.js"></script>


Markup

Add a dash of markup to your document following the pattern below. (Images should be the same size as one another.)

<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>


Call slider

Just before the closing <body> tag (after any JS file includes), call the slider with code below:

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



website
github
installation
faq
download

Advertisement
Tags: plugin, refine, slide, scroll, js, jquery, css, web, html, design, responsive

Leave a Comment

No Comment

© Creative3x Ltd.