如何设置 Nivo Slider 缩略图的样式？答案

【问题标题】：How do I style the Nivo Slider thumbnails?如何设置 Nivo Slider 缩略图的样式？
【发布时间】：2011-11-16 18:31:35
【问题描述】：

好吧，我几乎整天都在努力让 Nivo Slider 工作。我终于想出了如何显示缩略图，但现在它们被挤在一起了。我尝试为.nivo-controlNav img 上的图像添加边距/填充，但它只是将图像推到一起，并在缩略图后面显示子弹。

这是该网站的链接。

http://dl.dropbox.com/u/31659128/pawforpaw/index.html

我应用的 JS/选项：

    $(window).load(function() {
    $('#slider').nivoSlider({
        effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
        slices: 15, // For slice animations
        boxCols: 8, // For box animations
        boxRows: 4, // For box animations
        animSpeed: 500, // Slide transition speed
        pauseTime: 3000, // How long each slide will show
        startSlide: 0, // Set starting Slide (0 index)
        directionNav: true, // Next & Prev navigation
        directionNavHide: false, // Only show on hover
        controlNav: true, // 1,2,3... navigation
        controlNavThumbs: true, // Use thumbnails for Control Nav
        controlNavThumbsFromRel: false, // Use image rel for thumbs
        controlNavThumbsSearch: '.jpg', // Replace this with...
        controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
        keyboardNav: true, // Use left & right arrows
        pauseOnHover: true, // Stop animation while hovering
        manualAdvance: false, // Force manual transitions
        captionOpacity: 0.8, // Universal caption opacity
        prevText: 'Prev', // Prev directionNav text
        nextText: 'Next', // Next directionNav text
        beforeChange: function(){}, // Triggers before a slide transition
        afterChange: function(){}, // Triggers after a slide transition
        slideshowEnd: function(){}, // Triggers after all slides have been shown
        lastSlide: function(){}, // Triggers when last slide is shown
        afterLoad: function(){} // Triggers when slider has loaded
    });
});

还有 nivo 滑块的 CSS。

    /*
 * jQuery Nivo Slider v2.6
 * http://nivo.dev7studios.com
 *
 * Copyright 2011, Gilbert Pellegrom
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * March 2010
 */


/* The Nivo Slider styles */
.nivoSlider {
    position:relative;
}
.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    border:0;
    padding:0;
    margin:0;
    z-index:6;
    display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
    display:block;
    position:absolute;
    z-index:5;
    height:100%;
}
.nivo-box {
    display:block;
    position:absolute;
    z-index:5;
}
/* Caption styles */
.nivo-caption {
    position:absolute;
    left:0px;
    bottom:0px;
    background:#000;
    color:#fff;
    opacity:0.8; /* Overridden by captionOpacity setting */
    width:100%;
    z-index:8;
}
.nivo-caption p {
    padding:5px;
    margin:0;
}
.nivo-caption a {
    display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
    position:absolute;
    top:45%;
    z-index:9;
    cursor:pointer;
}
.nivo-prevNav {
    left:0px;
}
.nivo-nextNav {
    right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
    position:relative;
    z-index:9;
    cursor:pointer;
}
.nivo-controlNav a.active {
    font-weight:bold;
}

我真的希望缩略图位于滑块下方，而不仅仅是覆盖滑块下方的内容。

请帮忙。

【问题讨论】：

应该有自定义的 html/css 来设置你的滑块...你能把它也包括进去吗？可能会有所帮助。

标签： javascript jquery css

【解决方案1】：

不确定您要将这些缩略图与滑块相关的位置放在哪里，但我发现了您的一些问题：

使这些值生效：

.nivo-controlNav {
width: 900px;
left: 40px;
}

在你的 default.css 的第 35 行左右，删除 height 和 width 属性

.nivo-controlNav a {
display: block;
width: 22px; //get rid of this
height: 22px; //get rid of this
background: url(bullets.png) no-repeat;
text-indent: -9999px;
border: 0;
margin-right: 3px;
float: left;
}

【讨论】：

我可以把它放在任何地方，这不是问题。它使这些图像不再被捆绑在一起。
去掉 controlNav 的 22px 宽度和高度，我将 .nivo-controlNav 的宽度设置为 900 以匹配您的滑块宽度
.....我不敢相信我没有看到。哇。谢谢你。我觉得……现在瞎了……哈哈谢谢：D

【解决方案2】：

这里是一个 css 示例，用于获取所有活动拇指的边框：

   .nivo-controlNav img {
        z-index: 11;
        height: 85px; 
        width: 165px; 
        display:inline;
        position:relative;
        margin-right:10px;
    }
     a.active img{
        -moz-box-shadow: 0 0 5px 5px #1a64ac;
        -webkit-box-shadow: 0 0 5px 5px#1a64ac;
        box-shadow: 0 0 5px 5px #1a64ac;
    }
.nivo-controlNav a.active {
    opacity: 1; 
    z-index: 10;
}
.nivo-controlNav a:hover {
background: none;
text-decoration: none; 
opacity: 0.9; 
}

【讨论】：

图像已设置样式，但仍粘在一起。
你太棒了！我一直在寻找设计这个样式的地方！

【解决方案3】：

这就是你需要的吗？还是更多？

#slider .nivo-controlNav {
    position: absolute;
    bottom: 0;
    width: 960px;
}

.theme-default .nivo-controlNav a {
    display:block;
    width: 126px;
    height: 92px;
    background:url(bullets.png) no-repeat;
    text-indent:-9999px;
    border:0;
    margin-right:3px;
    float:left;
}

【讨论】：

【解决方案4】：

解决问题的方法可能是简单的 DTD 格式，您的 HTML 标签上没有任何格式只需添加任何 DTD 格式，也许过渡或严格的 Doctype 就可以解决缩略图的问题...

【讨论】：