Have a look at the carousal at http://www.poetics.in/projects.php . If you go by order i.e 1, 2, 3, the images load fine but if we click directly on, say 9 or 10, it won't display the image.

Carousal HTML
HTML Code:
<div id="gallerybox">


<div id="tabset">

<div id="paginationsmall"><p style="padding: 6px 3px 0pt 0pt; float: left; color: rgb(204, 204, 204);">images:</p>

<ul>


<li><a class="" id="tab1" href="javascript:void(0);">1</a></li>


<li><a class="" id="tab2" href="javascript:void(0);">2</a></li>


<li><a class="" id="tab3" href="javascript:void(0);">3</a></li>


<li><a class="" id="tab4" href="javascript:void(0);">4</a></li>


<li><a class="" id="tab5" href="javascript:void(0);">5</a></li>


<li><a class="" id="tab6" href="javascript:void(0);">6</a></li>


<li><a class="" id="tab7" href="javascript:void(0);">7</a></li>


<li><a class="selected" id="tab8" href="javascript:void(0);">8</a></li>


<li><a class="" id="tab9" href="javascript:void(0);">9</a></li>

<li><a class="" id="tab10" href="javascript:void(0);">10</a></li>


</ul>

</div>

</div>








<div style="width: 465px; display: block;" id="dhtml-carousel" class="carousel-component">

    <div style="width: 465px;" class="carousel-clip-region" align="center">

        <ul style="position: relative; left: -3255px; top: 0px;" class="carousel-list carousel-horizontal">

            <!-- Filled in via the loadInitHandler, loadNextHandler, and loadPrevHandler

            <li id="item-1">

            <a href="#">

                <img src="http://static.flickr.com/74/162582364_7fc3e2d60d_s.jpg"/>

            </a>Number One</li>

            -->

        <li id="dhtml-carousel-item-1"><img style="border: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 9px 3px;" src="poeticadmin/project_photos/20080614144017.jpg"><div class="commented">Northern side entry view</div></li><li id="dhtml-carousel-item-2"><img style="border: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 9px 3px;" src="poeticadmin/project_photos/20080614144059.jpg"><div class="commented">Main door lobby view</div></li><li id="dhtml-carousel-item-3"><img style="border: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 9px 3px;" src="poeticadmin/project_photos/20080614144426.jpg"><div class="commented">Guest living view</div></li><li id="dhtml-carousel-item-4"><img style="border: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 9px 3px;" src="poeticadmin/project_photos/20080615124701.jpg"><div class="commented">from family living</div></li><li id="dhtml-carousel-item-5"></li><li id="dhtml-carousel-item-6"></li><li id="dhtml-carousel-item-7"></li><li id="dhtml-carousel-item-8"><img style="border: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 9px 3px;" src="poeticadmin/project_photos/20080615125213.jpg"><div class="commented">stone work detail</div></li><li id="dhtml-carousel-item-9"></li><li id="dhtml-carousel-item-10"><img style="border: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 9px 3px;" src="poeticadmin/project_photos/20080615130757.jpg"><div class="commented">from family living view</div></li></ul>

    </div>

</div>


</div>
CSS - http://www.poetics.in/css/carousel.css &
Code CSS:
.sscarousel-list{
 
 
 
}
 
.carousel-component .carousel-list li { 
 
    width:465px; /*500 + 2 + 2 + 1 + 1 */
 
	background-repeat:no-repeat;
 
	background-position:center;
 
	padding: 0;
 
	margin: 0;	
 
}
 
 
 
.carousel-component .carousel-list li a { 
 
    display:block;
 
    border:2px solid #e2edfa;
 
    outline:none;
 
    -moz-outline:none; 
 
}
 
 
 
.carousel-component .carousel-list li a:hover { 
 
    border: 2px solid #87bf4e; 
 
}
 
 
 
.carousel-component .carousel-list li.active a { 
 
    border:2px solid #708fc7; 
 
}
 
 
 
 
 
.carousel-component .carousel-list li img { 
 
    display:block; 
 
}
 
 
 
.carousel-component .carousel-prev { 
 
/*    position:absolute;
 
    top:30px;
 
    z-index:3;*/
 
    cursor:pointer; 
 
 /*   left:5px; */
 
}
 
 
 
.carousel-component .carousel-next { 
 
  /*  position:absolute;
 
    top:30px;
 
    z-index:3;*/
 
    cursor:pointer; 
 
 
/*    right:5px;*/ 
 
}
 
 
 
.dhtml-carousel-item-1 img{
 
	text-align: left;
 
	border: 5px solid #999;	
 
}
 
.carousel-component { 
 
    padding:0px 0px 0px 0px;
 
    margin: 0 0 10px -2px;
 
    -moz-border-radius:0px;
 
    background-color: white;
 
    clear:both;
 
}
 
 
 
.carousel-component .carousel-clip-region { 
 
    padding:0px;
 
    margin:0px;
 
 
 
 
 
}
 
.carousel-clip-region img {
 
    margin:4px 0px 9px 0px;
 
  	border: #999999 1px solid;
 
	background-color: #FFFFFF;
 
	}
 
.carousel-component ul.carousel-list{
 
    text-align:center;
 
   /* background-color:white;*/
 
}
 
.carousel-component .carousel-list li { 
 
    text-align:left;
 
    margin:0px;
 
	font-family:tahoma, arial;
 
	font-size: 11px;
 
	line-height: 16px;
 
    /*width:450px;*/
 
    /*border: 1px solid gray;    */
 
}
 
 
 
#tabset {
 
    margin-left:5px;
 
    margin-bottom:2px;
 
}