Reduce Carousel widget height and width

Vikram3 · ‎08-21-2018

Hi,

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

Regards,

Vikram

Vikram3 · ‎08-31-2018

Hi,

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

HTML

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

Sharvan · ‎08-22-2018

Hi Vikram,

You can modify your HTML code with the below code.

<img ng-src="{{::slide.background}}" style=" margin-left:-397px;margin-top:35px; width:450px; height :220px">

and adjust the width and height according to your requirement.

Omkar Mone · ‎08-22-2018

Hi

Refer the below screenshot :-

in style make changes in height width margins.

Mark correct if it helps.

Regards,

Omkar Mone

www.dxsherpa.com

Vikram3 · ‎08-30-2018

Hi Thanks. I tried above method. Size is getting reduced. But there are grey areas around the carousel. I think that is the default size of it. Can you please tell me how to remove that.

Omkar Mone · ‎08-31-2018

Hi

Please attach some screenshots for better understanding.