1

複数の nivo スライダーの配置に悩んでいます。(現時点では) 5 つのスライダーがあり、すべて同じ位置に表示されます。ここで確認できます。

問題は、コード内の位置が常に同じであるということです。ブラウザのディスプレイには表示されません。「Keeping Track」または「Chemicals & Waste」をクリックすると、スライダーがページの上部に表示されるか、部分的にしか表示されません。

<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
    });
});
4

1 に答える 1

0

わかりました、これが解決策です。問題は CSS の「height:auto」にありました。それを取り除いて代わりに 330px を使用すると、完全にうまく機能します!

于 2013-01-14T06:02:23.383 に答える