nivo滑块溢出问题 [英] nivo slider overflow issue

问题描述

我正在使用nivoslider作为我的网页。图像看起来一个接一个地溢出，直到页面完全加载。这是我使用的CSS。我试过 overflow：hidden 属性。但它没有得到纠正。我该如何纠正？

CSS：

  .nivoSlider {
位置：相对的; 
} 
 .nivoSlider img {
 position：absolute; 
 top：0px;溢出：隐藏; 
 left：0px; 
} 
 / *如果图像包含在链接中* / 
 .nivoSlider a.nivo-imageLink {
 position：absolute; 
 top：0px; 
 left：0px; 
 width：500px; 
身高：100％; 
 border：0; 
 padding：0; 
保证金：0; 
 z-index：60; 
 display：none; 
} 
 / * Slider中的切片* / 
 .nivo-slice {
 display：block; 
位置：绝对; 
 z-index：50; 
身高：100％; 
} 
 / *标题样式* / 
 .nivo-caption {
位置：绝对; 
 left：0px; 
 bottom：0px; 
背景：＃000; 
颜色：#fff; 
 /*opacity:0.8;被caption覆盖透明度设置* / 
宽度：100％; 
 z-index：89; 
} 
 .nivo-caption p {
 padding：5px; 
保证金：0; 
} 
 / *方向导航样式（例如下一个&上一个）* / 
 .nivo-directionNav a {
 position：absolute; 
 top：45％; 
 z-index：99; 
光标：指针; 
} 
 .nivo-prevNav {
 left：0px; 
} 
 .nivo-nextNav {
 right：0px; 
} 
 / *控制导航样式（例如1,2,3 ...）* / 
 .nivo-controlNav a {
 position：relative; 
 z-index：99; 
光标：指针; 
} 
 .nivo-controlNav a.active {
 font-weight：bold; 
} 
  

HTML：

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

解决方案

指定高度＃滑块并将 overflow：hidden 添加到它

这将完美地修复它

I am using nivoslider for my webpage. The images look overflow one by one until the page loading fully. Here is the css i'm using. I have tried overflow:hidden property. But it didn't get corrected. How can i correct that?

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>

解决方案

Specify a height for #slider and add the overflow:hidden to it

This will perfectly fix it

这篇关于nivo滑块溢出问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！