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.
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)
Installation Essential steps
Link CSS
Move the slider CSS file to your server and link to it in the head section of your document.
<link rel="stylesheet" href="refineslide.css" />(This is just for the base CSS rules. You'll also want to include some styling to make the slider look good - check out the 'dark theme' stylesheet in the download as an example.)
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 decoding="async" src="img1.jpg" alt="" /></li>
<li><img decoding="async" src="img2.jpg" alt="" /></li>
<li><img decoding="async" 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>