Right now the carousel container falls outside the image.
I want the carousel container to have the same width as the image as shown in the example on https://angular-ui.github.io/bootstrap/ .
Here is my html:
<div class="offer-detail-image-div">
<uib-carousel active="0" interval="2000" no-wrap="false" no-pause="false">
<uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
<img class="offer-detail-image" ng-src= {{slide.image}}
</uib-slide>
</uib-carousel>
</div>
And the accompanying classes:
.offer-detail-image {
display: block;
overflow: visible;
width: auto;
height: auto;
max-width: 80%;
min-width: 70%;
margin-right: auto;
margin-bottom: 12px;
margin-left: auto;
float: none;
}
.offer-detail-image-div {
display: block;
width: 100%;
padding-right: 20px;
padding-left: 20px;
}
change the css like this u have to give 100% width and also in your css u have mention max-width 80%.
.offer-detail-image { display: block; overflow: visible; width: 100%; height: auto; margin-right: auto; margin-bottom: 12px; margin-left: auto; float: none; }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.