Question

我正在使用精益滑块：http://dev7studios.com/lean-slider/

我想将每张幻灯片链接到不同的网址。我注意到只有最后一张幻灯片中的代码被执行（并且还应用于所有其他幻灯片）。例如，仅在最后一张幻灯片上向Google添加标记会导致所有幻灯片链接到Google。不知何故，它只能看到最后一张幻灯片 - 如果你检查幻灯片上的元素，你会看到它总是突出显示最后一张幻灯片的代码。

编辑：我还注意到，当您不包含sample-style.css文件时，它可以正常工作。但没有这个，没有淡入/过渡效果，导航按钮没有格式化，所以没有这个文件就没有意义，但问题可能在于滑块的工作原理。

有关导致此问题或如何解决问题的任何想法？

唯一改变的地方 - 添加了每张幻灯片的链接。（index.html）

...
        <div id="slider">
            <div class="slide">
                <a href="http://www.yahoo.com" ><img src="images/1.jpg" alt=""/></a>
            </div>
            <div class="slide2">
                <a href="http://www.stackoverflow.com" ><img src="images/2.jpg" alt="" /></a>
            </div>
            <div class="slide3">
                <a href="http://www.amazon.com" ><img src="images/3.jpg" alt="" /></a>
            </div>
            <div class="slide4">
                <a href="http://www.google.com" ><img src="images/4.jpg" alt="" /></a>
            </div>
        </div>
...

Answer 1

我只是想通了。您应该在以下三个位置编辑z-index属性：

.lean-slider-slide.current {
    z-index: 1;
}

#slider-direction-nav {
    z-index: 2;
}

#slider-control-nav {
    z-index: 2;
}

您可以在下载精益滑块时在slider.css和sample-style.css中找到它。

Answer 2

看一下 EXAMPLE ，即使使用外部资源也能正常运行。

您需要确保拥有的东西：

1.包含jQuery库（jQuery必须包含在lean-slider.js之前）

2.包括lean-slider.js

3.包括lean-slider.css

4.确保你的图像上有一个auto_increment类（slider1，slider2，slider3等）

在所有这些（不是之前）之后添加：

$(document).ready(function() {
    $('#slider').leanSlider();
});

并确保包含图片的div标识为id="slider"

Answer 3

始终采取最后一个链接;使用css，您可以强制元素的位置并为每个图像启用链接：

/*lean slider css overwrite*/
#slider-control-nav, #slider-direction-nav
{
 z-index:3;
}

.lean-slider-slide.current
{
 z-index:2;
}

.lean-slider-slide.current a
{
 float:left;
}

幻灯片 - 将幻灯片链接到仅适用于最后一张幻灯片的URL

3 个答案: