Css Carousel Issues - html

Question

i am developing my custom site and have developed a pure css Carousel. There is one problem that whenever i navigate to second image the position does not remain fixed. :( it changes to bottom i mean the position changes to bottom.Please help me to fix this and Is there any way to add auto-scrolling in it?? This is the code:
Html:
<div id="slider">
<!-- Sildes -->
<img id="one" src="image Url 1" />
<img id="two" src="image Url 2" />
<img id="three" src="image Url 3" />
<img id="four" src="image Url 4" />
<img id="five " src="image Url 5" />
<!-- Links for the slides! -->
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
Css:
#slider {
width: 640px;
height: 320px;
margin: 50px auto 0;
position: relative;
background: #fff;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}
#slider:before, #slider:after {
content: '';
position: absolute;
width: 60%;
height: 20px;
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-ms-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-o-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-webkit-transform: rotate(-4deg) skew(-10deg);
-moz-transform: rotate(-4deg) skew(-10deg);
-o-transform: rotate(-4deg) skew(-10deg);
-ms-transform: rotate(-4deg) skew(-10deg);
transform: rotate(-4deg) skew(-10deg);
left: 10px;
bottom: 13px;
z-index: -1;
}
#slider:after {
left: auto;
right: 10px;
-webkit-transform: rotate(4deg) skew(10deg);
-moz-transform: rotate(4deg) skew(10deg);
-o-transform: rotate(4deg) skew(10deg);
-ms-transform: rotate(4deg) skew(10deg);
transform: rotate(4deg) skew(10deg);
}
#slider ul {
width: 140px;
height: 40px;
padding: 0 0 0 0;
position: absolute;
z-index: 10;
list-style: none;
left: 50%;
margin-left: -70px;
bottom: -60px;
}
#slider ul li:first-child {
margin-left: 16px;
}
#slider ul li {
float: left;
margin-right: 12px;
margin-top: 14px;
}
#slider ul li:last-child {
margin-right: 0;
}
#slider ul li a {
width: 12px;
height: 12px;
display: block;
outline: none;
border: none;
position: relative;
z-index: 2;
background: #aaa;
box-shadow: inset 0 1px 1px 0px rgba(0, 0, 0, 0.6), 0px 1px 1px 0px white;
-moz-box-shadow: inset 0 1px 1px 0px rgba(0, 0, 0, 0.6), 0px 1px 1px 0px white;
-webkit-box-shadow: inset 0 1px 1px 0px rgba(0, 0, 0, 0.6), 0px 1px 1px 0px white;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
#slider ul li a:hover {
background: #888;
}
#slider img {
position: absolute;
left: 0;
top: 0;
opacity: 0;
-webkit-transform: rotateZ(-10deg);
-moz-transform: rotateZ(-10deg);
-ms-transform: rotateZ(-10deg);
-o-transform: rotateZ(-10deg);
transform: rotateZ(-10deg);
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
#slider img:target {
opacity: 1;
-webkit-transform: rotateZ(0);
-moz-transform: rotateZ(0);
-ms-transform: rotateZ(0);
-o-transform: rotateZ(0);
transform: rotateZ(0);
}
#slider img#five {
opacity: 1;
-webkit-transform: rotateZ(0);
-moz-transform: rotateZ(0);
-ms-transform: rotateZ(0);
-o-transform: rotateZ(0);
transform: rotateZ(0);}
#slider img:not(:target), #slider img:target ~ img#five {
opacity: 0;
-webkit-transform: rotateZ(-10deg);
-moz-transform: rotateZ(-10deg);
-ms-transform: rotateZ(-10deg);
-o-transform: rotateZ(-10deg);
transform: rotateZ(-10deg);
}
#slider ul li a[href="#five"] {
background: #777;
}
#one:target ~ ul li a[href="#one"],
#two:target ~ ul li a[href="#two"],
#three:target ~ ul li a[href="#three"],
#four:target ~ ul li a[href="#four"],
#five:target ~ ul li a[href="#five"] {
background: #777;
}
#two:target ~ ul li a[href="#five"],
#three:target ~ ul li a[href="#five"],
#four:target ~ ul li a[href="#five"],
#one:target ~ ul li a[href="#five"] {
background: #aaa;
}
http://jsfiddle.net/NaL88/

Answer 1

Nice work.
I Don't understand you issue with the bottom. I cant find a problem (using chrome).
for auto-scroll, if you are trying no javascript than you could apply css animation using keyframes on hover.
regarding css selectors, use child selector (a > b) when possible. its more efficient than descendant selector (a b)
by the way, here is variation of the carousel with no li elements wrapping the anchor, using display: inline:block. less DOM depth , less elements = more efficient
fiddle
HTML:
<div id="slider">
<!-- Sildes -->
<img id="one" src="http://cssdeck.com/uploads/media/items/3/3yiC6Yq.jpg" />
<img id="two" src="http://cssdeck.com/uploads/media/items/4/40Ly3VB.jpg" />
<img id="three" src="http://cssdeck.com/uploads/media/items/0/00kih8g.jpg" />
<img id="four" src="http://cssdeck.com/uploads/media/items/2/2rT2vdx.jpg" />
<img id="five" src="http://cssdeck.com/uploads/media/items/8/8k3N3EL.jpg" />
<!-- Links for the slides! -->
<section>
</section>
</div>
CSS:
#slider {
width: 640px;
height: 320px;
margin: 50px auto 0;
position: relative;
background: #fff;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
}
#slider:before, #slider:after {
content: '';
position: absolute;
width: 60%;
height: 20px;
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-ms-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-o-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-webkit-transform: rotate(-4deg) skew(-10deg);
-moz-transform: rotate(-4deg) skew(-10deg);
-o-transform: rotate(-4deg) skew(-10deg);
-ms-transform: rotate(-4deg) skew(-10deg);
transform: rotate(-4deg) skew(-10deg);
left: 10px;
bottom: 13px;
z-index: -1;
}
#slider:after {
left: auto;
right: 10px;
-webkit-transform: rotate(4deg) skew(10deg);
-moz-transform: rotate(4deg) skew(10deg);
-o-transform: rotate(4deg) skew(10deg);
-ms-transform: rotate(4deg) skew(10deg);
transform: rotate(4deg) skew(10deg);
}
#slider section {
width: 140px;
height: 40px;
padding: 0 0 0 0;
position: absolute;
z-index: 10;
list-style: none;
left: 50%;
margin-left: -70px;
bottom: -60px;
}
#slider > section > a {
width: 12px;
height: 12px;
display: inline-block;
outline: none;
border: none;
position: relative;
z-index: 2;
background: #aaa;
box-shadow: inset 0 1px 1px 0px rgba(0,0,0,0.6), 0px 1px 1px 0px white;
-moz-box-shadow: inset 0 1px 1px 0px rgba(0,0,0,0.6), 0px 1px 1px 0px white;
-webkit-box-shadow: inset 0 1px 1px 0px rgba(0,0,0,0.6), 0px 1px 1px 0px white;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
#slider > section > a:hover {
background: #888;
}
#slider img {
position: absolute;
left: 0;
top: 0;
opacity: 0;
-webkit-transform: scale(1.2,1.2);
-moz-transform: scale(1.2,1.2);
-ms-transform: scale(1.2,1.2);
-o-transform: scale(1.2,1.2);
transform: scale(1.2,1.2);
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
#slider img:target {
opacity: 1;
-webkit-transform: scale(1,1);
-moz-transform: scale(1,1);
-ms-transform: scale(1,1);
-o-transform: scale(1,1);
transform: scale(1,1);
}
#slider img#five {
opacity: 1;
-webkit-transform: scale(1,1);
-moz-transform: scale(1,1);
-ms-transform: scale(1,1);
-o-transform: scale(1,1);
transform: scale(1,1);
}
#slider img:not(:target), #slider img:target ~ img#five {
opacity: 0;
-webkit-transform: scale(1.2,1.2);
-moz-transform: scale(1.2,1.2);
-ms-transform: scale(1.2,1.2);
-o-transform: scale(1.2,1.2);
transform: scale(1.2,1.2);
}
#slider > section > a[href="#five"] {
background: #777;
}
#one:target ~ section > a[href="#one"],
#two:target ~ section > a[href="#two"],
#three:target ~ section > a[href="#three"],
#four:target ~ section > a[href="#four"],
#five:target ~ section > a[href="#five"] {
background: #777;
}
#two:target ~ section > a[href="#five"],
#three:target ~ section > a[href="#five"],
#four:target ~section > a[href="#five"],
#one:target ~ section > a[href="#five"] {
background: #aaa;
}