<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  <script src="http://webuilder.info/Demo/Craftyslide/craftyslide.min.js"></script>
   
  <script>
  $("#slideshow").craftyslide();
  </script>

/*

Craftyslide CSS Styles

*/

#slideshow {
  margin:0;
  padding:0;
  position:relative;
  border:15px solid #fff;
  -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(http://webuilder.info/Demo/Craftyslide/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);
}

<div id="slideshow">
  <ul>
  <li>
  <img src="address image1" alt="" title="title pos1t" />
  </li>
   
  <li>
  <img src="address image2" alt="" title="title post2" />
  </li>
   
  <li>  
  <img src="address image3" alt="" title="title post3" />
  </li>
   
  <li>  
  <img src="address image4" alt="" title="title post4" />
  </li>
   
  <li>  
  <img src="address image5" alt="" title="title post5" />
  </li>  
  </ul>
  </div>