你好,我正在开发css和jquery slide.i在相同位置中具有绝对位置的多个div和相同的顶部和左侧位置,然后我使用了fadein和fadeout功能来切换滑块。有一个class滑块class2的父div,其中包含所有的滑块项目,现在我的问题是slider2的高度和底部都不会与滑块集合在一起。这是我的代码:
<div class="row no-margin">
<div class="col-md-12 no-margin">
<div class="slider2" id="slider_custom">
@if (slides != null)
{
foreach (var item in slides)
{
if (item.MenuPathId != null)
{
MenuPath menuPath = db.MenuPaths.Find(item.MenuPathId);
path = "/MenuPages/Page?PageName=" + menuPath.PageName;
}
else
{
path = item.Path;
}
<div class="slider-item" id="item@(item.Id)">
<img src="@item.Photo"/>
<div class="slider-caption">
<p class="slider-title">@((lang == "fa-IR") ? item.Title_fa : (lang == "en-US") ? item.Title_en : item.Title_ar)</p>
<p class="slider-text"> @((lang == "fa-IR") ? item.Description_fa : (lang == "en-US") ? item.Description_fa : item.Description_ar)</p>
</div>
</div>
}
<div class="slider-arrow">
<a href="#" class="left-anchor" id="left_anchor">
<i class="glyphicon glyphicon-chevron-left"></i>
</a>
<a href="#" class="right-anchor" id="right_anchor">
<i class="glyphicon glyphicon-chevron-right"></i>
</a>
</div>
<div class="top-slider-image">
<img src="~/Content/images/LOGO 4 SITE2.png"/>
</div>
}
</div>
</div>
</div>
还有我的CSS
.slider2{
position:relative;
}
.slider-item{
position: absolute;
top:0;
left:0;
width:100%;
height:auto;
display: none;
}
.slider-item:first-child{
display: block;
}
.slider-item img{
width:100%;
min-height:300px;
}
.no-margin{margin:0;
padding:0;}
.left-anchor{
padding:20px 10px;
float:left;
background-color:rgba(0,0,0,0.20);
color:white;
font-size:24px;
font-weight: 800;
}
.right-anchor{
padding:20px 10px;
float:right;
background-color:rgba(0,0,0,0.20);
color:white;
font-size:24px;
font-weight: 800;
}
.right-anchor:hover{
color:#f0f0f0;
}
.left-anchor:hover{
color:#f0f0f0;
}
.slider-arrow{
position: absolute;
width: 100% ;
top:calc(50% - 35px);
opacity: 1;
transition-property: opacity;
transition-duration: 0.5s;
}
.faded{
opacity:1;
}
.faded-out{
opacity:0.1;
}
.top-slider-image{
position: absolute;
/*z-index:4;*/
top:-1px;
}
.top-slider-image img{
width: 100%;
}
.slider-caption{
width: 100%;
position:absolute;
top:calc(50% - 34px);
text-align: center;
padding:0 150px;
}
.slider-title{
font-size:40px;
color:white;
text-shadow: 0px 0px 35px #4c4c4c, 1px 1px 35px #333333, 0px 0px 35px #5a5a5a, 1px 0px 35px #484848, 0px 1px 35px #7b7b7b
}
.slider-text{
font-size:20px;
color:white;
text-shadow: 0px 0px 15px #808080, 1px 1px 15px #636363, 0px 0px 15px #5a5a5a, 1px 0px 15px #7d7d7d, 0px 1px 15px #7b7b7b;
}
@media only screen and (max-width:992px) {
.slider-caption{
text-align: center;
padding:0 100px;
}
.slider-title{
font-size:30px;
color:white;
text-shadow: 0px 0px 35px #4c4c4c, 1px 1px 35px #333333, 0px 0px 35px #5a5a5a, 1px 0px 35px #484848, 0px 1px 35px #7b7b7b
}
.slider-text{
font-size:15px;
color:white;
text-shadow: 0px 0px 15px #808080, 1px 1px 15px #636363, 0px 0px 15px #5a5a5a, 1px 0px 15px #7d7d7d, 0px 1px 15px #7b7b7b;
}
}
@media only screen and (max-width:768px) {
.slider-caption{
text-align: center;
padding:0 50px;
}
.slider-title{
font-size:16px;
color:white;
text-shadow: 0px 0px 35px #4c4c4c, 1px 1px 35px #333333, 0px 0px 35px #5a5a5a, 1px 0px 35px #484848, 0px 1px 35px #7b7b7b
}
.slider-text{
font-size:14px;
color:white;
text-shadow: 0px 0px 15px #808080, 1px 1px 15px #636363, 0px 0px 15px #5a5a5a, 1px 0px 15px #7d7d7d, 0px 1px 15px #7b7b7b;
}
}
@media only screen and (max-width:597px) {
.slider-caption{
text-align: center;
padding:0 20px;
}
.slider-title{
font-size:14px;
color:white;
text-shadow: 0px 0px 35px #4c4c4c, 1px 1px 35px #333333, 0px 0px 35px #5a5a5a, 1px 0px 35px #484848, 0px 1px 35px #7b7b7b
}
.slider-text{
font-size:12px;
color:white;
text-shadow: 0px 0px 15px #808080, 1px 1px 15px #636363, 0px 0px 15px #5a5a5a, 1px 0px 15px #7d7d7d, 0px 1px 15px #7b7b7b;
}
}
现在Slider2和col和row不会变高。我使用jQuery来获取具有最大高度的元素并将其分配给slider2 div。但是有时它有时会得到零高度。我认为图片加载之前会达到高度。有什么建议?
绝对定位的元素不会影响父级的高度。您可以将其中一项/图像作为静态/相对放置.slider2
在幻灯片容器的内部和外部。然后用opacity:0;
或将其隐藏,visibility: hidden;
然后.slider2
将其保持高度。另一种解决方案是,.slider2
如果您确定幻灯片永远不会为空,请自行设置高度。欲了解更多信息,请使用CSS清除绝对定位的元素吗?
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句