rashadb rashadb - 5 months ago 103
AngularJS Question

How do you scale the carousel container size in Angular-UI-Bootstrap

Right now the carousel container falls outside the image.

enter image description here

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/.

enter image description here

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;
}

Answer

change the css like this u have to give 100% width aand 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;
}
Comments