Javascript Nivo滑块拇指

我正在使用nivo滑块，我正在尝试制作缩略图，但我无法让它工作

以下是我所拥有的：

，但我不能让它工作

---

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

Nivo网站有一个新的演示，展示了缩略图的工作原理：

相关示例具有以下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

标记如何使用

显示：inline

，这是使其工作的关键

---

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

Nivo站点有一个新的演示，演示了缩略图的工作原理：

相关示例具有以下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

标记如何使用

显示：inline

，这是使其工作的关键

---

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

我自己很难让图像缩略图正常工作。这对我有用。详情请参阅

添加此CSS样式作为最后一个要加载的样式（将其包含在其他核心Nivo CSS表下的链接中）

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

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

---

我自己很难让图像缩略图正常工作。这对我有用。详情请参阅

添加此CSS样式作为最后一个要加载的样式（将其包含在其他核心Nivo CSS表下的链接中）

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

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

---

我发现主题“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

并且，正如他们在中所指出的，您需要添加以下样式：

#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;
}

---

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

我发现主题“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

并且，正如他们在中所指出的，您需要添加以下样式：

#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;
}

---

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

我也很难找到我的缩略图。我终于找到了它们，把它们定位为“绝对”，最后它们出现在幻灯片的中间： 但是我不太喜欢它们的显示方式，所以我做了一个快速修复，需要编辑一点脚本

在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);

替换为：

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

然后在页面中放置一个somewhre，就完成了：）

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

---

希望这有帮助；）

我也很难找到我的缩略图在哪里。我终于找到了它们，把它们定位为“绝对”，最后它们出现在幻灯片的中间： 但是我不太喜欢它们的显示方式，所以我做了一个快速修复，需要编辑一点脚本

在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);

替换为：

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

然后在页面中放置一个somewhre，就完成了：）

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

希望这有帮助；）