Я использую карусель для загрузки в 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 –