Responsive jQuery Layout Carousel Slider Plugin - RadiantScroller

RadiantScroller is a jQuery responsive slider (carousel) plugin which allows to slide through grid and simple horizontal layouts.

Basic Usage:

1. Include jQuery library and jQuery radiantScroller's script and CSS files in the page.

<link rel="stylesheet" type="text/css" href="jquery.radiant_scroller.css" media="all">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.radiant_scroller-min.js"></script>

2. Include jQuery mousewheel for mouse wheel slide support.

<script src="jquery.mousewheel.js"></script>

3. Include jQuery UI or jQuery easing plugin for easing effects support.

<script src="jquery.easing.1.3.js"></script>

4. Create the html for the slidable layout.

<div id="myScroller">
<div class="scroller-el"><img src="http://lorempixel.com/400/400/animals/1" alt="Image" /></div>
<div class="scroller-el"><img src="http://lorempixel.com/400/400/animals/2" alt="Image" /></div>
<div class="scroller-el"><img src="http://lorempixel.com/400/400/animals/3" alt="Image" /></div>
<div class="scroller-el"><img src="http://lorempixel.com/400/400/animals/4" alt="Image" /></div>
<div class="scroller-el"><img src="http://lorempixel.com/400/400/nature/1" alt="Image" /></div>
<div class="scroller-el"><img src="http://lorempixel.com/400/400/nature/2" alt="Image" /></div>
<div class="scroller-el"><img src="http://lorempixel.com/400/400/nature/3" alt="Image" /></div>
<div class="scroller-el"><img src="http://lorempixel.com/400/400/nature/4" alt="Image" /></div>
<div class="scroller-el"><img src="http://lorempixel.com/400/400/people/1" alt="Image" /></div>
<div class="scroller-el"><img src="http://lorempixel.com/400/400/people/2" alt="Image" /></div>
<div class="scroller-el"><img src="http://lorempixel.com/400/400/people/3" alt="Image" /></div>
<div class="scroller-el"><img src="http://lorempixel.com/400/400/people/4" alt="Image" /></div>
<div class="scroller-el"><img src="http://lorempixel.com/400/400/food/1" alt="Image" /></div>
<div class="scroller-el"><img src="http://lorempixel.com/400/400/food/2" alt="Image" /></div>
<div class="scroller-el"><img src="http://lorempixel.com/400/400/food/3" alt="Image" /></div>
<div class="scroller-el"><img src="http://lorempixel.com/400/400/food/4" alt="Image" /></div>
</div>

5. The sample CSS to style the slider and controls.

<style type="text/css">
.radiant_scroller {
margin: 50px;
}
.radiant_scroller_wrapper {
background-color: #ccc;
}
.radiant_scroller .scroller-el {
width: 400px;
height: 400px;
margin-right: 10px;
margin-bottom: 10px;
}
.radiant_scroller .radiant-next, .radiant_scroller .radiant-prev {
bottom: -13px;
background-image: url('nav.png');
width: 21px;
height: 43px;
}
.radiant_scroller .radiant-next {
right: -42px;
top: 384px;
background-position: 0 -43px;
}
.radiant_scroller .radiant-prev {
left: -42px;
top: 384px;
background-position: 0 0;
}
.radiant_scroller .radiant-pagination {
text-align: center;
margin-top: 7px;
}
.radiant_scroller .radiant-pagination .radiant-page {
width: 15px;
height: 15px;
border-radius: 15px;
background-color: #ccc;
border: 1px solid #ccc;
}
.radiant_scroller .radiant-pagination .radiant-page:hover {
background-color: #efefef;
}
.radiant_scroller .radiant-pagination .current-page {
background-color: #808080;
border-color: #888;
}
</style>

6. Call the plugin with options.

<script>
$(document).ready(function() {
var sc = $('#myScroller').radiantScroller({
elementWidth: 400,
cols: 2,
rows: 2,
useMouseWheel: true,
addPagination: true
});
});
</script>

7. All the default options.

<script>
$(document).ready(function() {
var sc = $('#myScroller').radiantScroller({
cols: 2, // How many (maximum) columns should the scroller have
elementWidth: 200, // Width for the scroller's elements.
elementMargin: 10, // Horizontal (left/right) margin for the scroller's elements.
easingType: 'swing', // easing effects
animateDuration: 700,
rows: 2, // How many (maximum) rows should the scroller have
useMouseWheel: false, // Whether support for the mousewheel scrolling should be enabled.
addPagination: false, // Whether the scroller should have pagination (often displayed as small navigational dots) enabled.
nextButtonText: '', // Text to be shown on the "next" button.
prevButtonText: '' // Text to be shown on the "prev" button.
});
});
</script>

Change logs:

v0.1.1 (2014-12-05)

• small fix

v0.1.0 (2014-07-29)

• small fix

v0.0.5 (2014-07-28)

• small fix

v0.0.4 (2014-07-24)

• update.

---

This awesome jQuery plugin is developed by bodrovis. For more Advanced Usages, please check the demo page or visit the official website.