Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference


Specifies the width of a slide box which contains all slides.

Property Value

A Number value. The default is 0, stating that slide box has a width of 0 pixels.


This property value is important to determine how much space is required to display a slide. You need also to set the width of the SlideBar using CSS or inline style to the exact value as this property value.

Version Information

Supported in: v1.0.


In this example we are setting the width of the slide box to 300 pixels. The SlideBar width also has the same value set with CSS class names widget.

var $bar = null;

$(document).ready(function() {

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

slideWidth: 300,

slideHeight: 200



<!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>








background-color: white;

border: thin solid gray;

height: auto;;




width: 300px;

height: 200px;

text-align: center;


.slide span


display: inline-block;

font-size: 3em;

margin: 25% auto;

vertical-align: middle;


See Also