Minimal Panel Slider Widget For jQuery UI panelSlider - Download Minimal Panel Slider Widget For jQuery UI - panelSlider

Download Minimal Panel Slider Widget For jQuery UI – panelSlider

Posted on

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.

Minimal Panel Slider Widget For jQuery UI panelSlider - Download Minimal Panel Slider Widget For jQuery UI - panelSlider
File Size: 4.85 KB
Views Total: 1008
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

01 <div id="wrapper">
02   <div id="view1">
03     <div class="container">
04       <h1>First panel</h1>
05       <p>This is the first panel in line</p>
06       <a href="view2">Go to view 2</a> </div>
07   </div>
08   <div id="view2">
09     <div class="container">
10       <h1>Second panel</h1>
11       <p>This is the second panel in line</p>
12       <a href="view3">Go to view 3</a> </div>
13   </div>
14   <div id="view3">
15     <div class="container">
16       <h1>Third panel</h1>
17       <p>This is the third panel in line</p>
18       <a href="view4">Go to view 4</a> </div>
19   </div>
20   <div id="view4">
21     <div class="container">
22       <h1>Fourth panel</h1>
23       <p>This is the Fourth panel in line</p>
24       <a href="something">Do something</a> </div>
25   </div>
26 </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’).

01 $(function() {
02  
03   panelSlide = $("#wrapper").panelSlider({panels:["view1","view2","view3"]});
04    
05   // Here we add an extra panel after initialisation
06   panelSlide.panelSlider("addPanel","view4");
07    
08   // How to use sliding with click event on other than a elements
09   $("#view4").click(function(){
10       panelSlide.panelSlider("slide","view1",true);
11   });
12    
13 });

5. Available widget parameters.

1 // The panel currently in focus
2 currentView: null,
3  
4 // All panels added to the navigation system
5 panels:[]

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

source : jqueryscript.net