Slide Show Widget
Slide Shows are often part of modern UI. Various images can be shown randomly or in order. In Nedil Widget, we have different options for animations, arrows, play and pause options

Basic Usage
$.domLoaded(function() {
	
	$.get("#prog").widget("slideshow", CONFIG_JSON );	
	
}
HTML Template
		<div id="slideshow">
			<img src="image URL" title="Title text" >
			<img src="image URL" title="Title text"  >
		</div>
Configuring Options
It contains array of JSON objects. The properties are mentioned below.
NameTypeMust/OptionalDescription
pauseTimeNumberOptionalIn Milliseconds. Timegap between each slide
animTimeNumberOptionalIn Milliseconds. Animation time during slide changes
titlePosStringOptionalTitle positon. Allowed values "top" / "bottom". Default is "bottom"
autoPlayBooleanOptionalPlays the slides automatically if set true, default is true
arrowBooleanOptionalIf set true, arrows to move the slides will be shown. Default is true
animTypeStringOptionalAnimation Types. There are several animation options during the slide movement. Default is "random".
StringDescription
"smoothLeft"Smooth transition from left side
"smoothRight"Smooth transition from right side
"smoothTop"Smooth transition from top side
"smoothBottom"Smooth transition from bottom side
"bounceLeft"Bouncy transition from left side
"bounceRight"Bouncy transition from right side
"bounceTop"Bouncy transition from top side
"bounceBottom"Bouncy transition from bottom side
"blur"Blurs out the slide
"random"Randomly chooses from the above list
dimJSONOptionalSets dimension of the slideshow
NameDescription
widWidth of the slideshow
htHeight of the slideshow
posJSONOptionalSets position of the slideshow
NameDescription
xHorizontal Position
yVertical Position

Methods
NameDescription
play()Plays the slideshow
pause()Pauses the slideshow

Progress Bar Widget Examples Example 1
JS HTML
			$.domLoaded(function() {
			
				var te1, te2;
				
				te1 = $.get("#slideshow").widget("slideshow", {
					dim : { wid : 400, ht : 300},
					pauseTime : 2000,
					animTime : 1000,
					titlePos : "top", 
					autoPlay : true,
					arrow : true
				});	
				
				te2 = $.get("#slideshowl").widget("slideshow", {
					dim : { wid : 600, ht : 450},
					pauseTime : 3000,
					animTime : 1000,
					titlePos : "bottom", //"bottom" - Default, top
					arrow : true,
					autoPlay : false,
					animType : "bounceLeft"
				});	
				
				$.get("#play").on("click", function() {
					te2.play();
				});
				
				$.get("#pause").on("click", function() {
					te2.pause();
				});		

			});
	<body>

		<h4>SlideShow - Top title, Random Animation Types, Arrows, AutoPlay, Fast</h4>
		<div id="slideshow">
			<img src="../images/flower1.jpg" title="Lorem ipsum dolor sit amet, consectetur" >
			<img src="../images/flower2.jpg" title="Adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"  >
			<img src="../images/flower3.jpg" title="Quis nostrud exercitation ullamco laboris..." >
			<img src="../images/flower4.jpg" title="Nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident" >
		</div>

		<h4>SlideShow - Bottom title, bounceLeft Animation Type, Arrows, Slower, Play and Pause functions</h4>		
		<div id="slideshowl">
			<img src="../images/flower1.jpg" title="Lorem ipsum dolor sit amet, consectetur" >
			<img src="../images/flower2.jpg" title="Adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"  >
			<img src="../images/flower3.jpg" title="Quis nostrud exercitation ullamco laboris..." >
			<img src="../images/flower4.jpg" title="Nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident" >
		</div>
		<br/>
		<input type="button" value="Play" id="play" />
		<input type="button" value="Pause" id="pause" />				
			
	</body>	
Result