<link rel="stylesheet" href="http://stock-exchange.ucoz.com/er/reset.css" />  
  <link rel="stylesheet" href="http://stock-exchange.ucoz.com/er/ccslider.css" />  
  <link rel="stylesheet" href="http://stock-exchange.ucoz.com/er/slider_style.css" />  
   
  <style type="text/css">  
  body {  
  width: 100%;  
  max-width: 1000px;  
  }  
   
  #slider {  
  width: 1000px;  
  height: 450px;  
  }  
   
  #slider .control-links {  
  margin-top: -15px;  
  }  
   
  #demo-description {  
  max-width: 900px;  
  width: 90%;  
  margin: 60px auto;  
  color: #fff;  
  font: 20px 'PT Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;  
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);  
  }  
  </style>  
   
  <!--[if lt IE 8]>  
  <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>  
  <![endif]-->  
   
  <!--[if lt IE 9]>  
  <style type="text/css">  
  .slider-caption {  
  background: transparent;  
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2FFFFFF,endColorstr=#B2FFFFFF)"; /* IE8 */  
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2FFFFFF,endColorstr=#B2FFFFFF); /* IE6 & 7 */  
  zoom: 1;  
  }  
  </style>

<div id="slider">  
  [color=blue]<!-- <Картинки которые будут в слайдере> -->[/color]  
  <img src="http://1.s3.envato.com/files/29381343/gallery/demo1/assassins1.jpg" alt="This is an example of a simple caption" data-caption-position="bottom" data-transition='{"effect": "cubeUp", "slices": 9, "animSpeed": 1200, "delay": 100, "delayDir": "fromCentre", "easing": "easeInOutBack", "depthOffset": 300, "sliceGap": 30}' />  
  <img src="http://1.s3.envato.com/files/29381343/gallery/demo1/deus-ex1.jpg" alt="" data-captionelem="#caption" data-caption-position="top" data-transition='{"effect": "cubeRight", "slices": 5, "delay": 200}' />  
  <img src="http://1.s3.envato.com/files/29381343/gallery/demo1/batman.jpg" alt="Images can also serve as links. To see this in effect click on this slide image" data-caption-position="left" data-href="http://google.com" data-transition='{"effect": "cubeDown", "slices": 15, "animSpeed": 3000, "delay": 30, "easing": "easeInOutElastic", "depthOffset": 200, "sliceGap": 20}' />  
  <img src="http://1.s3.envato.com/files/29381343/gallery/demo1/prince.jpg" alt="" data-transition='{"effect": "cubeLeft", "slices": 5, "delay": 200, "delayDir": "toCentre"}' />  
  <img src="http://1.s3.envato.com/files/29381343/gallery/demo1/assassins2.jpg" alt="" data-transition='{"effect": "cubeUp", "slices": 5, "animSpeed": 1300, "delay": 100, "easing": "easeInOutCubic", "depthOffset": 500, "sliceGap": 50}' />  
  <img src="http://1.s3.envato.com/files/29381343/gallery/demo1/deus-ex2.jpg" alt="" data-transition='{"effect": "cubeRight", "slices": 5, "delay": 200, "delayDir": "last-first"}' />  
  </div>  
  [color=blue]<!-- </Картинки которые будут в слайдере> -->[/color]  
   
  <div id="caption" class="cc-caption">This is an example of a caption with a <a href="http://www.google.com">link</a></div>  
   
   
   
  <script src="http://stock-exchange.ucoz.com/er/jquery.min.js"></script>  
  <script>!window.jQuery && document.write('<script src="http://stock-exchange.ucoz.com/er/jquery-1.7.2.min.js"><\/script>')</script>  
  <script src="http://stock-exchange.ucoz.com/er/jquery.tools.tooltip.min.js"></script>  
  <script src="http://stock-exchange.ucoz.com/er/jquery.easing.1.3.min.js"></script>  
  <script src="http://stock-exchange.ucoz.com/er/jquery.ccslider-3.0.min.js"></script>  
  <script>  
  $(function(){  
  $('#demo-nav').find('a').tooltip({effect: 'slide'});  
  });  
   
  $(window).load(function(){  
  $('#slider').ccslider({  
  _3dOptions: {  
  imageWidth: 900,  
  imageHeight: 350  
  }  
  });  
  });  
  </script>