<div id="slideshow">  
  <ul>  
  <li>  
  <img title="Титульник" src="Ссылка на картинку" alt="Титульник" />  
  </li>  
  <li>  
  <img title="Титульник" src="Ссылка на картинку" alt="Титульник" />  
  </li>  
  <li>  
  <img title="Титульник" src="Ссылка на картинку" alt="Титульник" />  
  </li>  
  </ul>  
  </div>  

  <script src="/js/craftyslide.min.js"></script>  
  <script type="text/javascript">  
  $("#slideshow").craftyslide({  
  'width': 640,  
  'height': 300,  
  'pagination': true,  
  'fadetime': 500,  
  'delay': 500  
  });  
  </script>

/*  
  Craftyslide CSS Styles  
  */  
  #slideshow {  
margin:0 auto;  
  }  
  #slideshow {  
margin:10px;  
padding:0;  
position:relative;  
border:15px solid #f8f8f8;  
-webkit-box-shadow:0 3px 5px #999;  
-moz-box-shadow:0 3px 5px #999;  
box-shadow:0 3px 5px #999;  
  }  
  #slideshow ul {  
position:relative;  
overflow:hidden;  
margin:0;  
padding:0;  
  }  
  #slideshow ul li {  
position:absolute;  
top:0;  
left:0;  
margin:0;  
padding:0;  
list-style:none;  
  }  
  #pagination {  
clear:both;  
width:75px;  
margin:25px auto 0;  
padding:0;  
  }  
  #pagination li {  
list-style:none;  
float:left;  
margin:0 2px;  
  }  
  #pagination li a {  
display:block;  
width:10px;  
height:10px;  
text-indent:-10000px;  
background:url(/images/pagination.png);  
  }  
  #pagination li a.active {  
background-position:0 10px;  
  }  
  .caption {  
width:100%;  
margin:0;  
padding:10px;  
position:absolute;  
left:0;  
font-family:Helvetica, Arial, sans-serif;  
font-size:14px;  
font-weight:lighter;  
color:#fff;  
border-top:1px solid #000;  
background:rgba(0, 0, 0, 0.6);  
  }