Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference

insertSlideAt(slide, index)

Inserts a new slide at specified position in SlideBar widget.


slideObjectThe slide to insert to the collection
indexIntegerThe indexed location within the collection to insert the slide

Return Value

This method does not return a value.

Version Information

Supported in: v1.0.


In this example we are showing how to use insertSlideAt method to insert a new slide at position 2 in slide collection of SlideBar widget. Although the position is set to 2, if there are no slides present in SlideBar, the new slide will be added as a first slide.

$(document).ready(function() {

// Create an instance of SlideBar widget

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

slideWidth: 300,

slideHeight: 200



// Get the number of slides in SlideBar

var getSlideCount = function(){

return $bar.slidebar("getList").length + 1;



// Create a new slide

var createNewSlide = function(){

return { content: "<div class="slide"><span>Slide " + getSlideCount() + "</span></div>" };



// Insert the new slide at third position

$bar.slidebar("insertSlideAt", createNewSlide(), 2);


<!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"></div>





background-color: white;

border: thin solid gray;

height: auto;;




width: 300px;

height: 200px;

text-align: center;


.slide span


display: inline-block;

font-size: 2em;

margin: 25% auto;

vertical-align: middle;



See Also