CSS Slider3

HTML code

<div class="slider">
<input type="radio" id="control1" name="controls" checked="checked" />
<label for="control1"></label>
<input type="radio" id="control2" name="controls" checked="checked" />
<label for="control2"></label>
<input type="radio" id="control3" name="controls" checked="checked" />
<label for="control3"></label>
<input type="radio" id="control4" name="controls" checked="checked" />
<label for="control4"></label>

<div class="sliderinner">
<ul>
<li><img src="image/B1.jpg" /></li>
<li><img src="image/B4.jpg" /></li>
<li><img src="image/B3.jpg" /></li>
<li><img src="image/B2.jpg" /></li>
</ul>
</div>

</div>

CSS code

.slider{
display:block;
height:390px;
max-width:870px;
margin: outo;
margin-left:10px;
position:relative;
}

.sliderinner{
width: 100%;
height: 100%;
overflow:hidden;
position:relative;
}
.sliderinner>ul{
list-style:none;
height:100%;
width:500%;
overflow:hidden;
position: relative;
left:0px;
-webkit-transition: left .8s cubic-bezier(0.77,0,175,1);
-moz-transition: left .8s cubic-bezier(0.77,0,0.75,1);
-o-transition: left .8s cubic-bezier(0.77,0,0.75,1);
transition: left .8s cubic-bezier(0.77,0,0.75,1);
}

.sliderinner>ul>li{
width:870px;
height:390px;
float:left;
position:relative;
}

.sliderinner>ul>li>img{
margin:auto;
height:390px;
width:870px;
}

.sliderinner  input[type=radio]{
position:relative;
bottom:15px;
z-index:100;
visibility:hidden;
}

.slide label{
position: absolute;
left: 50%;
z-index:100;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%;
cursor: pointer;
-webkit-box-shadow: 0px 0px 3px rgba (0,0,0,.8);
-moz-box-shadow:0px 0px 3px rgba (0,0,0,.8);
box-shadow: 0px 0px 3px rgba (0,0,0,.8);
-webkit-transition: background-color .2s;
-moz-transition: background-color .2s;
transition: background-color .2s;
}

.slider input[type=radio]#control1:checked~.sliderinner>ul { left: 0 }
.slider input[type=radio]#control2:checked~.sliderinner>ul { left: -910px }
.slider input[type=radio]#control3:checked~.sliderinner>ul { left: -1780px }

.slider input[type=radio]#control4:checked~.sliderinner>ul { left: -2650px }

Result

Image : http://mall.liveitgorgeous.com/marketplace-fashion/all-clothing/tops/tees.html