Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference

insertSlideAfter(slide, refSlide)

Inserts a new slide at position after specified slide in SlideBar widget.


slideObjectThe slide to insert to the collection
refSlide ObjectA reference slide after which the newly added slide will be positioned

Return Value

This method does not return a value.

Version Information

Supported in: v1.0.


In this example we are showing how to use insertSlideAfter method to place a new slide after currently selected slide used as a reference 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>" };



// Get the currently selected (visible) slide

var getCurrentSelection = function(){

return $bar.slidebar("option", "selectedSlide");



// Insert the new slide after the currently selected slide

$bar.slidebar("insertSlideAfter", createNewSlide(), getCurrentSelection());


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