html - 想要使滑动图像可点击

Question

我想让这个图像 slider 中的滑动图像可点击。

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 就可以了。
因此，无论 slider 的当前位置是什么，最后一个元素始终位于顶部，并且您在 slider 上添加的任何 anchor 标记(除了最后一个)都将不起作用。

您可以使用 z-index 将当前幻灯片提升到顶部以使 anchor 标记起作用。
添加以下 css 应该可以正常工作

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

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

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

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