Nivo滑块拇指

Question

我正在使用nivo-slider，我试图制作缩略图，但我不能让它工作。

这就是我所拥有的：

Nino Slider Demo

Here is the tutorial on how to，但我不能让它工作。

Nive Slider Website

我希望有人能看到我做错了什么。

Answer 1

我发现主题'default.css‘与img样式冲突(如他们的教程所述)。您需要在default.css中注释掉以下类的css样式：

.theme-default .nivoSlider img
.theme-default .nivoSlider a
.theme-default .nivo-controlNav
.theme-default .nivo-controlNav a
.theme-default .nivo-controlNav a.active

而且，正如他们的tutorial中所指出的，您需要添加此样式：

#slider .nivo-controlNav {
    position:absolute;
    bottom:-70px; /* Put the nav below the slider */
}
#slider .nivo-controlNav img {
    display:inline; /* Unhide the thumbnails */
    position:relative;
    margin-right:10px;
}

我在这方面也遇到了麻烦，希望它能帮助一些人。

Answer 2

我也很难找到我的缩略图在哪里。我最终通过将它们定位为“绝对”来找到它们，并且它们最终出现在幻灯片的中间:)

但我真的不喜欢它们的显示方式，所以我做了一个快速修复，这需要稍微编辑一下脚本。

在jquery.nivo.slider.js中，在文件的开头添加以下内容：

var thumbnails = $("#thumbnails"); // this is where your thumbnails will be

然后找到这个：

//Add Control nav
if(settings.controlNav){
    var nivoControl = $('<div class="nivo-controlNav"></div>');
    slider.append(nivoControl);

并替换为

//Add Control nav
if(settings.controlNav){
    var nivoControl = $('<div class="nivo-controlNav"></div>');
    thumbnails.append(nivoControl);

查找以下内容：

$('.nivo-controlNav a', slider).live('click', function(){

替换为：

$('.nivo-controlNav a', thumbnails).live('click', function(){

然后在你的页面中放置一个，你就完成了:)

当然，可以做很多改进，但正如我所说的，这是一个快速解决方案。如果Nivo slider的下一个版本可以选择将缩略图放在不同的位置，那就太好了。

希望这能有所帮助;)

Answer 3

Nivo网站有一个新的演示，展示了缩略图是如何工作的：http://nivo.dev7studios.com/demos/

相关示例具有以下CSS样式：

#slider3 {
    margin-bottom:110px;
}
#slider3 .nivo-controlNav {
    position:absolute;
    left:185px;
    bottom:-70px;
}
#slider3 .nivo-controlNav a {
    display:inline;
}
#slider3 .nivo-controlNav img {
    display:inline;
    position:relative;
    margin-right:10px;
    -moz-box-shadow:0px 0px 5px #333;
    -webkit-box-shadow:0px 0px 5px #333;
    box-shadow:0px 0px 5px #333;
}
#slider3 .nivo-controlNav a.active img {
    border:1px solid #000;
}

请注意.nivo-controlNav类中的a和img标记如何使用display: inline，这是使其工作的关键。

其他属性用于定位导航栏和添加阴影。