我正在使用Nivo Slider,我想将子弹(controlnav)从滑块底部移动到顶部。我已经尝试了一段时间,但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>');
}
}
我希望我解释得很清楚,我真的会得到一些帮助!
谢谢!
答案 0 :(得分:1)
你可以改变.after到.append的位置,这会使滑块把controlNav放在滑块div中。
然而,除此之外,我无法解决由于这样做而导致的高度问题,而没有实际定义滑块的高度(我不能这样做,因为我需要它来响应窗口大小)。任何进一步的帮助都会很棒。