Ich benutze ein Bootstrap-Karussell in asp.net. Ich möchte die Breite des Karussells so einstellen, dass es die volle Breite des Browserfensters mit einer festen Höhe einnimmt, wenn ich die Breite auf 100% ändere, funktioniert es nicht. Im Anschluss ist der Code für Karusselldynamisch die Karussellbreite auf die Fenstergröße setzen
<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>
Ich habe die Breite der Bilder und das Karussell in das Browserfenster manuell einstellen, aber ich mag diese dynamisch.
finden Sie die 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%;
}
und auch, wenn ich das Karussell kommt auf der Oberseite der Seitenleiste auf der rechten Seite blättern. Wie vermeide ich das?
ich habe es versucht, aber es funktioniert nicht die Antwort mit Arbeits Code –
Herausgegeben arbeiten: //www.w3schools. com/bootstrap/bootstrap_carousel.asp –
Sie verweisen für weitere Informationen http @yatin –