0
我在asp.net中使用了引导程序传送带。我想设置旋转木马的宽度,以便它占用具有固定高度的浏览器窗口的整个宽度,如果我将宽度更改为100%,则不起作用。以下是旋转木马将轮播宽度动态设置为窗口大小
<div id="myCarousel" class="carousel slide" data-ride="carousel" style="width:1177px; height:239px; top: 0px; left: 0px;">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox" style="width:1177px; height:240px; top: 0px; left: 0px;">
<div class="item active">
<img src='images/image1.jpg' alt="Chains" style="width:1177px"/>
</div>
<div class="item">
<img src='images/image2.jpg' alt="Chains" style="width:1177px"/>
</div>
<div class="item">
<img src='images/image3.jpg' alt="Chains" style="width:1177px"/>
</div>
<div class="item">
<img src='images/image4.jpg' alt="Chains" style="width:1177px"/>
</div>
</div>
</div>
我已经手动设置图像的宽度和轮播到浏览器窗口中的代码,但我想这是动态的。
以下是CSS
.carousel {
position: relative;
}
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
}
.carousel-inner > .item {
position: relative;
display: none;
-webkit-transition: .6s ease-in-out left;
transition: .6s ease-in-out left;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
line-height: 1;
width: 1177px;
}
.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
display: block;
}
.carousel-inner > .active {
left: 0;
}
.carousel-inner > .next,
.carousel-inner > .prev {
position: absolute;
top: 0;
width: 100%;
}
.carousel-inner > .next {
left: 100%;
}
.carousel-inner > .prev {
left: -100%;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
left: 0;
}
.carousel-inner > .active.left {
left: -100%;
}
.carousel-inner > .active.right {
left: 100%;
}
而且当我向右滚动的传送带亮起侧边栏的顶部。我如何避免这种情况。
我已经尝试过,但它不@yatin –
编辑工作,有工作的代码 –
您可以参考有关更多信息,HTTP答案://www.w3schools。 com/bootstrap/bootstrap_carousel.asp –