Nivo 滑块拇指答案

【问题标题】：Nivo slider thumbsNivo 滑块拇指
【发布时间】：2011-03-30 20:21:58
【问题描述】：

我正在使用 nivo-slider 并尝试制作缩略图，但我无法让它工作。

这是我所拥有的：

Nino Slider Demo

Here is the tutorial on how to，但我无法让它工作。

Nive Slider Website

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

【问题讨论】：

标签： javascript jquery slider nivo-slider

【解决方案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;
}

我也遇到了这个问题，希望对某人有所帮助。

【讨论】：

【解决方案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(){

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

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

希望这会有所帮助；）

【讨论】：

【解决方案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，这是使其工作的关键。

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

【讨论】：

【解决方案4】：

我自己很难让图像缩略图正常工作。这对我有用。详情请见my blog entry。

将此 CSS 样式添加为最后加载（将其包含在其他核心 Nivo CSS 表单下方的 LINK 中）

.nivo-controlNav a {
display:inline; /* Display the thumbnail link element */
}

#slider .nivo-controlNav img {
display:inline; /* Un-hide the thumbnail image element */
position:relative;
margin: 10px 10px 0 0; /* Provide some white space around the thumbs */
}

#slider .nivo-controlNav {
position: absolute;
top: 600px; /* 600px is the height of our images in the slider */
}

并且在调用 Nivo 时不要忘记设置这些参数：

$('#slider').nivoSlider({
controlNav:true, /* Display the control navigation */
controlNavThumbs:true, /* Display thumbnails */
controlNavThumbsFromRel:true, /* Source thumbnails from rel attribute */
});

【讨论】：