SlideBar is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps
a suite of UI Components for development of web apps
Advanced User Interface Controls and Components
Created: 01 September 2014
SlideBar widget consists of multiple slides which can contain custom elements or images arranged in custom layouts. When we are moving from one to the next slide, a transition between slides is accompanied with or without an animation effect. In following sections we will show you how to start and stop an animation from code using built-in methods.
Whether animation is enabled or disabled is determined from value of allowAnimation property. By setting this property value to true, it will allow changes of slides to be accompanied with a transition effect. By default, all slides are animated in a way that they are moved from right to left in specific amount of time. How much time is required for animation of each slide, from start to finish, is determined animationSpeed property value. This property holds a number which represents the time in milliseconds, which is the length of each animation effect. Default value is set to 2000ms, but you can modify this from code.
To start an animation from code, we will use the startAnimation method. Here is how this looks like into the code:
$(document).ready(function() {
// Create an instance of SlideBar widget
var $bar = $('#slidebar').slidebar({
slideWidth: 500,
slideHeight: 300
});
// Start an animation
$('#start').click(function(e){
$bar.slidebar("option", {
"animationSpeed": document.frm.speed.value
});
$bar.slidebar("startAnimation");
});
});
<!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;
}
As it is shown in our demonstration above, by clicking on Start button, the animation will start and slides will move from right to left. The speed of animation is determined by the value of the Speed Value input box.
If navigation buttons are visible, animation of current slide can be interrupted by clicking some navigation button. The number of navigation buttons equals the number of slides. So when a specific button is clicked, the current animation is interrupted and stopped and the corresponding slide is shown.
We can also stop an animation by using the stopAnimation method:
$('#stop').click(function(e){
$bar.slidebar("stopAnimation");
});
In our example, whenever the Stop button is clicked the current animation is stops. This will only stop the animation of the currently visible slide. Any further clicks on navigation buttons, will change the current slide, but without animation effect. If we want to move to a specific slide, we also need to set the selectedSlide or selectedIndex property to a specific slide:
$bar.slidebar("option", "selectedIndex", 2);
In above code line, after animation is stopped, the third slide will come into view.
Our demonstration shows only a most used case of animation effect, slides moving from right to left, but there can be other effects that better suite your application requirements. In either case, you can control animation flow using the above methods and properties.