Search a CodePlex project


Project Description
AjaxControlToolkit based behavior for jQuery Carousel plugin.

CarouselBehavior

CarouselBehavior is an AjaxControlToolkit based behavior for jQuery Carousel plugin.
The Carousel plugin exists in Twitter Bootstrap.

Usage

Stylesheets for jQuery UI and Twitter Bootstrap
<!DOCTYPE html>
<html>
   <head>   
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="http://code.jquery.com/ui/1.10.1/themes/base/minified/jquery-ui.min.css" rel="stylesheet" type="text/css" />
     <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  ...

Script references for AjaxControlToolkit scripts
<!DOCTYPE html>
<html>
  <head> 
     <script type="text/javascript" src="Scripts/MicrosoftAjax/Start.js"></script>
     <script type="text/javascript" src="Scripts/MicrosoftAjax/extended/ExtendedControls.js"></script>
     <script type="text/javascript" src="Scripts/MyClientControls/RegisterMyClientControls.js"></script>
   ...

Script loader based initialization
<!DOCTYPE html>
<html>
    <head>
       ...       
      <script type="text/javascript"> 
    	Sys.require([Sys.scripts.Carousel], function(){
    		
    		$(document).ready(function() {	
    		  $create(Sys.Extended.UI.Carousel, 
			{	
			  ActiveItem: 0, 
			  ImageUrl: "img/albums/demolition/", 
			  Interval: 4000, 
			  ImageNames: "P1040907.JPG,P1040908.JPG,P1040909.JPG"
			}, 
			null, 
			null, 
			$get("carousel"));
							
		  });	
    	});   
      </script>
    </head>
    <body>
        <div id="carousel"></div>
    </body>
</html>

Screenshot

CarouselBehavior_screenshot1.pngCarouselBehavior_screenshot2.png







Not affiliated with Microsoft and CodePlex
To remove your project or any question, please contact us: [email protected]