Reduce Carousel widget height and width

Vikram3
Giga Guru

Hi,

How to scale/reduce height and width of carousel widget/instance.

Regards,

Vikram

1 ACCEPTED SOLUTION

Vikram3
Giga Guru

Hi,

I have enhanced HTML and CSS. It worked well for reducing size and removing grey area.

HTML

<div class="pull-in">
<uib-carousel interval="options.interval">
<uib-slide ng-repeat="slide in ::data.slides" active="slide.active">
<div class="container">
<a href="{{::slide.url}}" title="Open carousel item">
<img ng-src="{{::slide.background}}" sstyle=" margin-left:100px;margin-top:25px; width:300px; height :0px" role="presentation">
</a>
</div>
</uib-slide>
</uib-carousel>
</div>

CSS

.carousel-control.left {
width: 0px;
height: 0px;
}
.carousel-control.right {
width: 0px;
height: 0px;
}
.carousel-control .glyphicon-chevron-left{
width: 0px;
height: 0px;
margin-top:0px;
font-size:0px;
}
.carousel-control .glyphicon-chevron-right{
width: 0px;
height: 0px;
margin-top:0px;
font-size:0px;
}

View solution in original post

5 REPLIES 5

Vikram3
Giga Guru

Hi,

I have enhanced HTML and CSS. It worked well for reducing size and removing grey area.

HTML

<div class="pull-in">
<uib-carousel interval="options.interval">
<uib-slide ng-repeat="slide in ::data.slides" active="slide.active">
<div class="container">
<a href="{{::slide.url}}" title="Open carousel item">
<img ng-src="{{::slide.background}}" sstyle=" margin-left:100px;margin-top:25px; width:300px; height :0px" role="presentation">
</a>
</div>
</uib-slide>
</uib-carousel>
</div>

CSS

.carousel-control.left {
width: 0px;
height: 0px;
}
.carousel-control.right {
width: 0px;
height: 0px;
}
.carousel-control .glyphicon-chevron-left{
width: 0px;
height: 0px;
margin-top:0px;
font-size:0px;
}
.carousel-control .glyphicon-chevron-right{
width: 0px;
height: 0px;
margin-top:0px;
font-size:0px;
}