Want to make the sliding images clickable - html

Question

I would like to make the sliding images clickable in this image slider.
http://dev7studios.com/lean-slider/
I tried
<div id="wrapper">
<div class="slider-wrapper">
<div id="slider">
<div class="slide1">
<img src="images/1.jpg" alt="" />
</div>
<div class="slide2">
<img src="images/2.jpg" alt="" />
</div>
<div class="slide3">
<img src="images/3.jpg" alt="" />
</div>
<div class="slide4">
<img src="images/4.jpg" alt="" />
</div>
</div>
<div id="slider-direction-nav"></div>
<div id="slider-control-nav"></div>
</div>
But it didn't work.

Answer 1

Actually how it works, it makes all the slides opacity:0 initially, and add class current on the currently viewed slide/element and make opacity: 1 on it.
So Whatever is the current position of the slider, the last element is always on the top, and any anchor tags you add on sliders (apart from last one) will not work.
You can use z-index to elevate the current slide on top to make the anchor tag work.
Adding the following css should make it work
.leaner-slider-slide {
z-index: 1;
}
.leaner-slider-slide.current {
z-index: 10;
}
To make direction and nav buttons on top of slider
#slider-direction-nav, #slider-control-nav {
z-index: 20;
}