Responsive jQuery Page Content Slider Plugin - Element Slider

Element Slider is a jQuery & jQuery UI plugin for creating a responsive anything slider which allows the visitor to navigate your page content with switch arrows.

Basic Usage:

1. Include the latest jQuery library and jQuery UI on the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

2. Include jQuery element slider on the page.

<script type="text/javascript" src="js/elementslider.js"></script>

3. Create the html for the switch arrows.

<div class="switch-wrapper" id="left-wrapper">
<div id="left-switch"></div>
</div>
<div class="switch-wrapper" id="right-wrapper">
<div id="right-switch"></div>
</div>

4. Create the html for slider.

<div id="slider">

<div id="first" class="slide">
<h1> Title 1 </h1>
Your Content
</div>

<div id="second" class="slide">
<h1> Title 2 </h1>
Your Content
</div>

<div id="third" class="slide">
<h1> Title 3 </h1>
Your Content
</div>

...

</div>

5. Create the html for the pager.

<div id="paginator">
<ul>
</ul>
</div>

6. Call the plugin.

<script>
$(document).ready(function () {
elementSlider('slider','div','','',1000);
});
</script>

/* Options

slideType, //type defined for slides (div, article, section)
slideClass, //class attribute for slides
paginator, //show paginator true/false
speed //speed of slide transitions

*/

7. Add the following styles in your CSS file and change it to your taste.

#slider-container {
margin: 0 auto;
width: 100%;
min-width: 320px;
height: 680px;
position: relative;
}
.switch-wrapper {
position: relative;
top: 50%;
}
.switch-wrapper, #right-switch, #left-switch {
width: 52px;
height: 60px;
}
#left-wrapper {
position: absolute;
left: 0%;
}
#right-wrapper {
position: absolute;
right: 0%;
}
#right-switch {
background: url("../images/right-arrow.png");
background-repeat: no-repeat;
}
#left-switch {
background: url("../images/left-arrow.png");
background-repeat: no-repeat;
display: none;
}
#right-switch:hover, #left-switch:hover {
cursor: pointer;
}
#slider {
position: relative;
width: 75%;
margin: auto;
height: 90%;
}
#first, #second, #third, #fourth {
position: absolute;
 width:100%  left:4%;
overflow: auto;
overflow-x: hidden;
margin: 10 auto;
}
#paginator {
text-align: center;
width: 100%;
}
#paginator ul {
margin: auto;
}
.unchecked {
background: url("../images/unchecked.png");
}
.checked {
background: url("../images/checked.png");
}
.unchecked, .checked {
background-repeat: no-repeat;
width: 19px;
height: 19px;
float: left;
list-style-type: none;
}
.slide {
max-width: 1020px;
position: relative;
}

---

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