RSlider

Simple javascript carousel which works with elements that have different or the same width.

Requirements

Requires jQuery

Usage

Setup your HTML.

<div class="slider">
  <div class="slider-element">content</div>
  <div class="slider-element">content</div>
  <div class="slider-element">content</div>
  <div class="slider-element">content</div>
</div>

Copy rslider folder into your project
Add rslider.css to your <head> tag.

<link rel="stylesheet" type="text/css" href="rslider/rslider.css"/>

Add rslider.js before your closing <body> tag.

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="rslider/rslider.js"></script>

Initialize the slider.

$(document).ready(function() {
  $('.slider').rslider(/* Options */);
});

Examples

$(document).ready(function() {
  $('.slider').rslider({
    width: 600,
    arrows: true,
    initialSlide: 3
  });
});

Options

Option	Type	Default	Description
width	int	500	Sliders mask width
arrows	string	false	'sides' or 'bottom'
dots	boolean	false	Dots under the slider
currentClass	string	none	Class for the selected slide
initialSlide	int / string	number of elements / 2	Which element to be centered
overlay	boolean	false	Overlay container
overlayClass	string	none	Class for overlay container

Methods

Method	Arguments	Description
rsNext()		Next slide
rsPrev()		Previous slide
rsResetSlide()		Reset to initial slide
rsJumpTo()	int	Jump to slide
rsGetCurrentSlide()		Return current element as jQuery object

License

MIT

About

Carousel that works with different width for each element.

http://xbogdan.github.io/RSlider

MIT License

Languages

Language:JavaScript 65.2%Language:HTML 18.3%Language:CSS 16.4%