rwdslider's Introduction

Responsive Slider JS

RWD-Slider

v 0.0.2

Generate a responsive slideshow component in native JavaScript.

Features

Slider Responsive
Auto size items
Update size of items when "onResize"
Breakpoint for modify nbView
Css classes for state of arrows
Without jQuery

DEMO

Clone this repository and get a DEMO In CLI >

npm install gulp

HTML

This plugin have need a structure as like that :

<div id="wrapper">
	<a class="btn-prev"></a>
	<ul>
		<li>item #01</li>
		<li>[...]</li>
		<li>item #09</li>
	</ul>
	<a class="btn-next"></a>
</div>

JS

<script>
	new rwdSlider({
		wrapper : "#slider",
		nbView : 4,
        nbMove : 2
	});
</script>

Binding control

For button prev & next, just use this term in your choice of className. Ex : btn-next, BtnNext ...

Parameters

Name of parameter	Type	Default	Description
wrapper	String	null	Selector of wrapper passed at sizzle selector (Necessary)
container	String	ul	Selector of content items of slider
item	String	li	Selector of items
nbView	Number	4	Number items visible
nbMove	Number	2	Number items slide
breakpoint	Object	px:0, nb:0	Object contain breakpoint in px (max-width) and nbView Parameters

UseCase with breakpoint

If you should to modify the number of element you show, you can pass in parameter an object containing the limit of breakpoint and number of show item.

<script>
	new rwdSlider({
		wrapper : "#slider",
		nbView : 4,
        nbMove : 2,
        breakpoint : {
        	px:768,
        	nb:2
        }
	});
</script>