Nivo Controlnav 位置答案

【问题标题】：Nivo Controlnav positionNivo Controlnav 位置
【发布时间】：2013-07-24 12:15:35
【问题描述】：

我正在使用 Nivo 滑块，我想将项目符号（控件导航）从滑块的底部移动到顶部。我已经尝试了一段时间，但 jquery 并不是我真正的强项。现在的方式，当我调整窗口大小时，它的位置正在改变。有没有办法让它粘住，或者让 div 在顶部而不是在滑块下方？

代码如下：

<div class="slider-wrapper">
    <div id="slider" class="nivoSlider">
        <img src="img/bird1.jpg" alt="" />
        <img src="img/bird2.jpg" alt="" />
        <img src="img/bird3.jpg" alt=""  />
    </div>
</div>

这是 nivo-slider css 中的 controlnav：

.nivo-controlNav {
position:fixed;
left:50%;
bottom:51%;
}

.nivo-controlNav a {
    cursor: pointer;
    position: relative;
    z-index: 99;
    float:left;
    }

.nivo-controlNav a.active {
    font-weight:bold;
}

这里是 controlnav javascript：

if(settings.controlNav){
        vars.controlNavEl = $('<div class="nivo-controlNav"></div>');
        slider.after(vars.controlNavEl);
        for(var i = 0; i < kids.length; i++){
            if(settings.controlNavThumbs){
                vars.controlNavEl.addClass('nivo-thumbs-enabled');
                var child = kids.eq(i);
                if(!child.is('img')){
                    child = child.find('img:first');
                }
                if(child.attr('data-thumb')) vars.controlNavEl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('data-thumb') +'" alt="" /></a>');
            } else {
                vars.controlNavEl.append('<a class="nivo-control" rel="'+ i +'">'+ (i + 1) +'</a>');
            }
        }

我希望我解释得足够好，我真的很感激一些帮助！

谢谢！

【问题讨论】：

标签： jquery html css slider nivo-slider

【解决方案1】：

您可以将 .after 的位置更改为 .append，这将使滑块将 controlNav 放在滑块 div 中。

但是，除此之外，如果没有实际定义滑块的高度，我无法解决这样做导致的高度问题（我不能这样做，因为我需要它来响应窗口大小）。任何进一步的帮助都会很棒。

【讨论】：