多个Nivo滑块 - 定位不明确

我与我的多个nivo滑块的定位战斗。我有（现在）五个滑块应该出现在同一个位置，which can be seen here。多个Nivo滑块 - 定位不明确

问题在于代码中的定位总是相同的;但它不在浏览器的显示器上。当点击“保持跟踪”或“化学废料”时，滑块会出现在页面的顶部，或者只是部分显示。

<div style="margin-left: 10px"> 
    <div id="pagewrap"> 
     <div class="slidewrap"> 
      <div id="slider1"> 
       <a class="lightview" href="images/geg_fish_stocks.png"><img alt="Gallery Picture" title="#caption2" src="images/geg_fish_stocks_light.png" /></a> 
       <a class="lightview" href="images/geg_protected_areas.png"><img alt="Gallery Picture" title="#caption6" src="images/geg_protected_areas_light.png" /></a> 
      </div> 
      <div id="slider2" style="margin-top: -350px; visibility: hidden"> <!-- Atmosphere --> 
       <a class="lightview" href="images/geg_temperature.png"><img alt="Gallery Picture" title="#caption4" src="images/geg_temperature_light.png" /></a> 
       <a class="lightview" href="images/geg_indoor_cooking.png"><img alt="Gallery Picture" title="#caption17" src="images/geg_indoor_cooking_light.png" /></a> 
      </div> 
      <div id="slider3" style="margin-top: -350px; visibility: hidden"> <!-- Biodiversity --> 
       <a class="lightview" href="images/geg_protected_areas.png"><img alt="Gallery Picture" title="#caption6" src="images/geg_protected_areas_light.png" /></a> 
       <a class="lightview" href="images/geg_access_benefit.png"><img alt="Gallery Picture" title="#caption7" src="images/geg_access_benefit_light.png" /></a> 
      </div> 
      <div id="slider4" style="margin-top: -350px; visibility: hidden"> <!-- Chemicals --> 
       <a class="lightview" href="images/geg_radioactive_waste.png"><img alt="Gallery Picture" title="#caption13" src="images/geg_radioactive_waste_light.png" /></a> 
       <a class="lightview" href="images/geg_basel_convention.png"><img alt="Gallery Picture" title="#caption14" src="images/geg_basel_convention_light.png" /></a> 
      </div> 
      <div id="slider5" style="margin-top: -350px; visibility: hidden"> <!-- Keeping Track --> 
       <a class="lightview" href="images/kt_hdi.png"><img alt="Gallery Picture" title="#caption9" src="images/kt_hdi_light.png" /></a> 
       <a class="lightview" href="images/kt_food_supply.png"><img alt="Gallery Picture" title="#caption10" src="images/kt_food_supply_light.png" /></a> 
      </div>

的CSS是这样的：

#slidewrap{ 
    position:absolute; 
    background: #fff; 
}  

#slider, #slider1, #slider2, #slider3, #slider4, #slider5 { 
    position:relative; 
    height:auto; 
    width:915px; 
    border:10px solid rgba(89,117,220,0.33); 
    box-shadow:0 0 5px #444; 
    margin: 0; 
} 
#slider img, #slider1 img, #slider2 img, #slider3 img, #slider4 img, #slider5 img{ 
    position:absolute; 
    top:20px; 
    left:0px; 
    display:none; 
}

我真的迷茫了，不知道为什么会。感谢任何可以帮助我解决这个谜题的提示。

插件激活：

$(window).load(function() 
{ 
    $('#slider1').nivoSlider({ 
     pauseTime: 4000 
    }); 
    $('#slider2').nivoSlider({ 
     pauseTime: 4000 
    }); 
    $('#slider3').nivoSlider({ 
     pauseTime: 4000 
    }); 
    $('#slider4').nivoSlider({ 
     pauseTime: 4000 
    }); 
    $('#slider5').nivoSlider({ 
     pauseTime: 4000 
    }); 
    $('#slider6').nivoSlider({ 
     pauseTime: 4000 
    }); 
    $('#slider7').nivoSlider({ 
     pauseTime: 4000 
    }); 
});

来源

2013-01-09 luftikus143

将插件应用于滑块的JS代码示例会很有帮助。 – Boaz

添加了插件激活。这有帮助吗？ – luftikus143

我认为它至少部分是一个CSS事物。对于DIV来说，“style =”margin-top：-350px;“似乎对我来说并不一致，我认为$ sliderX的位置应该是绝对的;我测试过它，但没有任何变化...... – luftikus143