Advanced User Interface Controls and Components
Gets or sets the currently selected slide by using its index.
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.
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>
<html>
<head>
<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>
</head>
<body>
<div id="slidebar" class="widget">
<div>
<ul>
<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>
</ul>
</div>
</div>
</body>
</html>
.widget
{
background-color: white;
border: thin solid gray;
height: auto;;
}
.slide
{
width: 500px;
height: 300px;
text-align: center;
}
.slide span
{
display: inline-block;
font-size: 3em;
margin: 25% auto;
vertical-align: middle;
}