Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference


Gets or sets the currently selected slide by using its index.

Property Value

A Number. The default value is -1, stating that there is no slide currently selected in SlideBar.


Whenever a new slide is added to the SlideBar, automatically becomes selected. This property value changes depending on the index of selectedSlide in the list of all slides present in the SlideBar.

Version Information

Supported in: v1.0.


The following example shows how to select a slide from code using the slide index. In our example the slide at position 3 in the list will become selected. That means the fourth slide, because the list is indexed starting from 0.

$(document).ready(function() {

// Create an instance of SlideBar widget

var $bar = $('#slidebar').slidebar({

slideWidth: 500,

slideHeight: 300



// Select the third slide

$bar.slidebar("option", "selectedIndex", 3);


<!DOCTYPE html>



<link rel="stylesheet" href="css/integralui.slidebar.css" />

<link rel="stylesheet" href="css/themes/theme-blue.css" />

<script type="text/javascript" src="external/jquery-1.9.1.min.js"></script>

<script type="text/javascript" src="external/jquery.ui.core.min.js"></script>

<script type="text/javascript" src="external/jquery.ui.widget.min.js"></script>

<script type="text/javascript" src="js/jquery.integralui.widget.min.js"></script>

<script type="text/javascript" src="js/jquery.integralui.slidebar.min.js"></script>



<div id="slidebar" class="widget">



<li><div class="slide"><span>Slide 1</span></div></li>

<li><div class="slide"><span>Slide 2</span></div></li>

<li><div class="slide"><span>Slide 3</span></div></li>

<li><div class="slide"><span>Slide 4</span></div></li>

<li><div class="slide"><span>Slide 5</span></div></li>








background-color: white;

border: thin solid gray;

height: auto;;




width: 500px;

height: 300px;

text-align: center;


.slide span


display: inline-block;

font-size: 3em;

margin: 25% auto;

vertical-align: middle;


See Also