This time I will share jQuery Plugin and tutorial about Minimal Panel Slider Widget For jQuery UI – panelSlider, hope it will help you in programming stack.
panelSlider is a lightweight and easy-to-use jQuery UI widget which allows you to slide through a group of content panels just as a step wizard.
How to use it:
1. Include the necessary jQuery and jQuery UI on the web page.
1 |
<script src="/path/to/jquery.min.js"></script> |
2 |
<script src="/path/to/jquery-ui.js"></script> |
2. Include the panelSlider.js script after jQuery library.
1 |
<script src="panelSlider.js"></script> |
3. Add content panels to the panel slider.
03 |
<div class="container"> |
05 |
<p>This is the first panel in line</p> |
06 |
<a href="view2">Go to view 2</a> </div> |
09 |
<div class="container"> |
11 |
<p>This is the second panel in line</p> |
12 |
<a href="view3">Go to view 3</a> </div> |
15 |
<div class="container"> |
17 |
<p>This is the third panel in line</p> |
18 |
<a href="view4">Go to view 4</a> </div> |
21 |
<div class="container"> |
23 |
<p>This is the Fourth panel in line</p> |
24 |
<a href="something">Do something</a> </div> |
4. Initialize the panelSlider with a list of id’s which should be slideable, and attach the panelSlide widget to a specific DOM object (in this case the div with it ‘wrapper’).
03 |
panelSlide = $("#wrapper").panelSlider({panels:["view1","view2","view3"]}); |
06 |
panelSlide.panelSlider("addPanel","view4"); |
09 |
$("#view4").click(function(){ |
10 |
panelSlide.panelSlider("slide","view1",true); |
5. Available widget parameters.
This awesome jQuery plugin is developed by alexandrainst. For more Advanced Usages, please check the demo page or visit the official website.
