1

我正在使用精益滑块：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>
...
4

3 回答 3

3

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

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

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

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

您可以在下载 Lean Slider 时slider.css找到它。sample-style.css

于 2014-07-16T19:56:27.060 回答
0

看看这个示例，即使使用外部资源，它也能完美运行。

你需要确保你拥有的东西：

1.包含 jQuery 库（必须先包含 jQuery）

2.包含精益slider.js

3.包括精益slider.css

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

在所有这些（不是之前）下面添加这个：

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

并确保div包含您的图像的有一个 IDid="slider"

于 2013-08-29T04:23:51.563 回答
0

始终走最后一个链接；使用 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;
}
于 2015-07-09T22:59:39.683 回答