Responsive jQuery Page Content Slider Plugin - Element Slider
File Size: | 110KB |
---|---|
Views Total: | 2045 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.