Join the #BuildWithBuildAgent Challenge! Get recognized, earn exclusive swag, and inspire the ServiceNow Community with what you can build using Build Agent.  Join the Challenge.

Reduce Carousel widget height and width

Vikram3
Tera Guru

Hi,

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

Regards,

Vikram

1 ACCEPTED SOLUTION

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