Want to make the sliding images clickable

Question

I would like to make the sliding images clickable in this image slider.

I tried

<div id="wrapper">

    <div class="slider-wrapper">
        <div id="slider">
            <div class="slide1">
               <a href="http://www.imdb.com/title/tt1217209/"> <img src="images/1.jpg" alt="" /></a>
            </div>
            <div class="slide2">
              <a href="http://www.imdb.com/title/tt0317219/">   <img src="images/2.jpg" alt="" /></a>
            </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.

have you tried putting an [onclick event](http://stackoverflow.com/questions/12627443/jquery-click-vs-onclick) and navigating using javascript? — jbutler483, Nov 10 '14 at 11:52
I believe this code will work, I am quessing the problem is somewhere else. So better post a fiddle with the problem to get an answer — laaposto, Nov 10 '14 at 11:53

score 0 · Accepted Answer · answered Nov 10 '14 at 12:54

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;
}

Want to make the sliding images clickable

1 Answers1