CSS Slider2

HTML code

<div class="slider-wrapper">
<table <border="2" style="border-collapse:collapse;">
<tr>
<td>
<div class="scroll">
<ul class="s-thumbs">

<li><center><a href="#slide-1"><img src="image/DT1.jpg" /></a></center></li>
<li><center><a href="#slide-2"><img src="image/DT2.jpg" /></a></center></li>
<li><center><a href="#slide-3"><img src="image/DT3.jpg" /></a></center></li>
<li><center><a href="#slide-4"><img src="image/DT4.jpg" /></a></center></li>
<li><center><a href="#slide-5"><img src="image/DT5.jpg" /></a></center></li>
<li><center><a href="#slide-6"><img src="image/DT6.jpg" /></a></center></li>

</ul>
</div>
</td>
<td>
<ul class="s-slides">
<li id="slide-1" class="slideLeft"><img src="image/D1.jpg" /></li>
<li id="slide-2" class="slideLeft"><img src="image/D2.jpg" /></li>
<li id="slide-3" class="slideLeft"><img src="image/D3.jpg" /></li>
<li id="slide-4" class="slideLeft"><img src="image/D4.jpg" /></li>
<li id="slide-5" class="slideLeft"><img src="image/D5.jpg" /></li>
<li id="slide-6" class="slideLeft"><img src="image/D6.jpg" /></li>
</ul>
</td>

</tr>
</table>

</div>

CSS code

.scroll {
    background-color: #bbb;
    width: 200px;
    height: 400px;
    overflow: scroll;

}

.slider-wrapper ul,
.slider-wrapper li,
.slider-wrapper div,
.slider-wrapper img,
.slider-wrapper a {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    list-style: none;
}

.slider-wrapper {
    height: 1000px;
width:1000px;
    overflow: hidden;
}

ul.s-thumbs li {
    float: center;
}

ul.s-slides,
ul.s-slides li,
ul.s-slides a,
ul.s-slides img {
    width: 683px;
    height: 410px;
    position: relative;
padding-left:10px;
padding-right:50px;
}

ul.s-slides {
    overflow: hidden;
    clear: both;
}

ul.s-slides li {
    position: absolute;

    z-index: 50;

/* Slide Left */
@-webkit-keyframes 'slideLeft' {
    0% { left: -1500px; }
20% { left: -1200px; }
40% { left: -900px; }
60% { left: -600px; }
80% { left: -300px; }
    100% { left: 0; }
}
ul.s-slides li.slideLeft:target {
    z-index: 100;

    -webkit-animation-name: slideLeft;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
}

/* Slide Right */
@-webkit-keyframes 'slideRight' {
    0% { left: 1500px; }
20% { left: 1200px; }
40% { left: 900px; }
60% { left: 600px; }
80% { left: 300px; }
    100% { left: 0; }
}

ul.s-slides li.slideRight:target {
    z-index: 100;

    -webkit-animation-name: slideRight;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;

}

Result

image : red :http://www.slashdress.com/maxi-dresses/2011-casual-dresses-womens-dresses-cotton-beach-skirt-casual.html/attachment/casual-dress-aeecpa