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

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

CSS Slider 1

HTML code

<div class="accordian">

<ul>

<li>

<div class="image_title">

<a href="#">Banner1</a>

</div>

<a href="#"><img src="image/B1.jpg" /></a>

</li>

<li>

<div class="image_title">

<a href="#">Banner1</a>

</div>

<a href="#"><img src="image/B2.jpg" /></a>

</li>

<li>

<div class="image_title">

<a href="#">Banner1</a>

</div>

<a href="#"><img src="image/B3.jpg" /></a>

</li>

<li>

<div class="image_title">

<a href="#">Banner4</a>

</div>

<a href="#"><img src="image/B4.jpg" /></a>

</li>

</ul>

</div>

CSS code

* {

margin: 0; 

padding: 0;

}

body {

background: #ccc; 

font-family: arial, verdana, tahoma;

}

/*Time to apply widths for accordian to work

Width of image = 740px

total images = 4

so width of hovered image = 6740px

width of un-hovered image = 40px - you can set this to anything

so total container width = 740 + 40*3 = 860px;

default width = 860/5 = 215x;

*/

.accordian {

width: 865px; height: 320px;

overflow: hidden;

margin: 100px auto;

box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);

-webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);

-moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);

}

.accordian ul {

width: 2000px;

}

.accordian li {

position: relative;

display: block;

width: 215px;

float: left;

border-left: 1px solid #888;

box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);

-webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);

-moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);

transition: all 0.5s;

-webkit-transition: all 0.5s;

-moz-transition: all 0.5s;

}

.accordian ul:hover li {width: 40px;}

.accordian ul li:hover {width: 740px;}

.accordian li img {

display: block;

}

.image_title {

background: rgba(0, 0, 0, 0.5);

position: absolute;

left: 0; bottom: 0;

width: 740px;

}

.image_title a {

display: block;

color: #fff;

text-decoration: none;

padding: 20px;

font-size: 16px;

}

Result

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

              http://emilyssanctuary.com/2013/05/20/life-at-lipsy/

              http://www.koopoi.com/Clothing/c1/index.html