nivo slider overflow issue

Question

Я использую nivoslider для своей веб-страницы. Изображения выглядят переполненными один за другим до полной загрузки страницы. Вот css, который я использую. Я пробовал overflow:hidden недвижимости. Но это не исправило. Как я могу это исправить?

CSS:

.nivoSlider { 
    position:relative; 
} 
.nivoSlider img { 
    position:absolute; 
    top:0px; overflow:hidden; 
    left:0px; 
} 
/* If an image is wrapped in a link */ 
.nivoSlider a.nivo-imageLink { 
    position:absolute; 
    top:0px; 
    left:0px; 
    width:500px; 
    height:100%; 
    border:0; 
    padding:0; 
    margin:0; 
    z-index:60; 
    display:none; 
} 
/* The slices in the Slider */ 
.nivo-slice { 
    display:block; 
    position:absolute; 
    z-index:50; 
    height:100%; 
} 
/* 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:89; 
} 
.nivo-caption p { 
    padding:5px; 
    margin:0; 
} 
/* Direction nav styles (e.g. Next & Prev) */ 
.nivo-directionNav a { 
    position:absolute; 
    top:45%; 
    z-index:99; 
    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:99; 
    cursor:pointer; 
} 
.nivo-controlNav a.active { 
    font-weight:bold; 
} 

HTML:

<div id="slider">     
    <img src="uploads/images/6431-45-york-st-kitchen-b.jpg" width="315" height="250" alt="" />     
    <img src="uploads/images/9931-45-york-st-front-a.jpg" width="315" height="250" alt="" />     
    <img src="uploads/images/8931-45-york-st-bed-1a.jpg" width="315" height="250" alt="" /> 
    <img src="uploads/images/3931-45-york-st-bath-a.jpg" width="315" height="250" alt="" /> 
    <img src="uploads/images/4031-45-york-st-study-a.jpg" width="315" height="250" alt="" /> 
    <img src="uploads/images/7531-45-york-st-kitchen-a.jpg" width="315" height="250" alt="" />  
    <img src="uploads/images/1931-45-york-st-living-b.jpg" width="315" height="250" alt="" /> 
    <img src="uploads/images/5531-45-york-st-foyer-a.jpg" width="315" height="250" alt="" /> 
</div> 

Answer 1

Укажите высоту для #slider и добавить к нему overflow:hidden

Это будет прекрасно это исправить

Answer 2

Это происходит главным образом в связи с более медленным, и нет никакого способа, чтобы справиться с этим.

Но, что вы можете сделать, это вызвать функцию ползунка nivo после полной загрузки страницы. просто используйте свойство window.onLoad и вызовите внутри него функцию nivo.

Как следующий

<script> 
    window.onload = init; 
    function init() { 
     /* call to your nivo function */ 
    } 
</script>