Advanced User Interface Controls and Components
Gets the list of of currently visible slides in SlideBar.
This method doesn't have any parameters.
An array that represents the list of slides.
Supported in: v1.0.
In this example we are showing how to call getCurrentList method.
$(document).ready(function() {
// Create an instance of SlideBar widget
var $bar = $('#slidebar').slidebar({
slideWidth: 300,
slideHeight: 200
});
// Get a list of currently visible slides in SlideBar
$bar.slidebar("getCurrentList");
});
<!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
{
width: 300px;
height: 200px;
}
.slide
{
width: 300px;
height: 200px;
text-align: center;
}
.slide span
{
display: inline-block;
font-size: 2em;
margin: 25% auto;
vertical-align: middle;
}