Currently, the carousel container extends beyond the image.
https://i.sstatic.net/6CqCt.png
I aim to make the carousel container match the width of the image, just like in the example provided at https://angular-ui.github.io/bootstrap/.
https://i.sstatic.net/jwXkV.png
This is the snippet of my HTML code:
<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>
These are the corresponding CSS 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;
}