Minimal Panel Slider Widget For jQuery UI - panelSlider

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.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery-ui.js"></script>

2. Include the panelSlider.js script after jQuery library.

<script src="panelSlider.js"></script>

3. Add content panels to the panel slider.

<div id="wrapper">
  <div id="view1">
    <div class="container">
      <h1>First panel</h1>
      <p>This is the first panel in line</p>
      <a href="view2">Go to view 2</a> </div>
  </div>
  <div id="view2">
    <div class="container">
      <h1>Second panel</h1>
      <p>This is the second panel in line</p>
      <a href="view3">Go to view 3</a> </div>
  </div>
  <div id="view3">
    <div class="container">
      <h1>Third panel</h1>
      <p>This is the third panel in line</p>
      <a href="view4">Go to view 4</a> </div>
  </div>
  <div id="view4">
    <div class="container">
      <h1>Fourth panel</h1>
      <p>This is the Fourth panel in line</p>
      <a href="something">Do something</a> </div>
  </div>
</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').

$(function() {

  panelSlide = $("#wrapper").panelSlider({panels:["view1","view2","view3"]});
  
  // Here we add an extra panel after initialisation
  panelSlide.panelSlider("addPanel","view4");
  
  // How to use sliding with click event on other than a elements
  $("#view4").click(function(){
      panelSlide.panelSlider("slide","view1",true);
  });
  
});

5. Available widget parameters.

// The panel currently in focus
currentView: null, 

// All panels added to the navigation system
panels:[] 

---

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