nivo 슬라이더 오버플로 문제

내 웹 페이지에 nivoslider를 사용하고 있습니다. 이미지는 페이지가 완전히로드 될 때까지 하나씩 오버 플로우됩니다. 여기에 CSS를 사용하고 있습니다. 나는 overflow:hidden 속성을 시도했다. 그러나 그것은 시정되지 않았다. 어떻게 해결할 수 있습니까?nivo 슬라이더 오버플로 문제

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>

출처

2012-01-02 designersvsoft

가 해결됩니다 추가 다음과 같은

? –

내 편집 된 쿼리를 참조하십시오. – designersvsoft

이 #slider의 높이를 지정하고

에 overflow:hidden이 완벽하게 그것을

출처

2012-01-02 11:44:48

좋아요. 고맙습니다. 그것은 완벽하게 작동합니다. – designersvsoft

환영합니다. –

이 대부분 느린 연결에서 발생하고이를 처리 할 방법이 없습니다.

하지만 페이지를 완전히로드 한 후에 nivo 슬라이더 함수를 호출하면됩니다. window.onLoad 속성을 사용하고 그 안에 nivo 함수를 호출하면됩니다. 아마 HTML을 살펴 유용 할 것

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

출처

2012-01-02 11:30:14

nivo 슬라이더 오버플로 문제

답변

관련 문제