Slide 1

Slide 5

Slider 2 Slide 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Second Slider 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Second Slider 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Slider 2 Slide 2

Second Slider 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Slider

Standard

One

Two

<div class='slider'>
	<div>Slide 1</div>
	<div>Slide 2</div>
</div>

Controls on top

One

Two

Three

<div class='slider top'>
	<div>Slide 1</div>
	<div>Slide 2</div>
</div>

Vertical

One

Two

Three

<div class='slider vertical'>
	<div>Slide 1</div>
	<div>Slide 2</div>
</div>

Vertical with controls on the right

One

Two

<div class='slider vertical right'>
	<div>Slide 1</div>
	<div>Slide 2</div>
</div>

Padded (controls outside of content)

One

Two

<div class='slider pad'>
	<div>Slide 1</div>
	<div>Slide 2</div>
</div>

Peeking at neighboring slides

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB

CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC

<div class='slider' data-peek='20%'>
	<div>Slide 1</div>
	<div>Slide 2</div>
</div>

Fade in/out

One

Two

<div class='slider fade'>
	<div>Slide 1</div>
	<div>Slide 2</div>
</div>

Auto height

One

Two

taller than One

<div class='slider auto-height pad'>
	<div>Slide 1</div>
	<div>Slide 2</div>
</div>

Slider with detached nav

Slider here...

Slide 1

Slide 2

...detached nav here

Options

Full window:
```
<div class='slider full-window'>
```
Full screen:
```
<div class='slider full-screen'>
```
Slide duration
```
<div class='slider' data-duration=1>
```
in seconds. Default is .2.
Vertically center slides' content with
```
<div class='slider align-middle'>
```
Detach slider nav by adding an id to the slider and creating
```
<div class='slider-nav' data-for='slider-id'>
```
elsewhere
URI with hash matching a slide id in a slider, auto slides to it.
```
data-peek=20%
```
to peek at neighboring slides, where 20% becomes 20% padding on left and right