<link rel="stylesheet" href="/css/reset.css" />
  <link rel="stylesheet" href="/css/ccslider.css" />
  <link rel="stylesheet" href="/css/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="/js/jquery.min.js"></script>
  <script>!window.jQuery && document.write('<script src="/js/jquery-1.7.2.min.js"><\/script>')</script>
  <script src="/js/jquery.tools.tooltip.min.js"></script>  
  <script src="/js/jquery.easing.1.3.min.js"></script>
  <script src="/js/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>