想要使滑动图像可点击

Question

我想在此图像滑块中点击滑动图像。

http://dev7studios.com/lean-slider/

我试过

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

但它没有用。

Answer 1

实际上它是如何工作的，它最初制作了所有幻灯片opacity:0，并在当前查看的幻灯片/元素上添加了课程current并在其上设置了opacity: 1。 因此，无论滑块的当前位置是什么，最后一个元素始终位于顶部，并且您在滑块上添加的任何锚标记（除了最后一个）都不起作用。

您可以使用z-index提升当前幻灯片，使锚标签正常工作 添加以下css应该可以正常工作

.leaner-slider-slide {
    z-index: 1;
}

.leaner-slider-slide.current {
    z-index: 10;
}

在滑块顶部制作方向和导航按钮

#slider-direction-nav, #slider-control-nav {
    z-index: 20;
}