How can we remove grey space from carousel widget? Any help would be highly appreciated

MR7 · ‎05-20-2019

I have customized carousel widget where I have reduced the height and now after implementing it I can see extra grey space only on the left side. How can we remove this. Any help would be appreciated.

Copied the below hard coded html content. Increasing the width is also not helping in achieving the same.

MR7 · ‎07-01-2019

Clone carousel widget

In HTML part, type below code

<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}}" style="width:100%" role="presentation">
</a>
</div>
</uib-slide>
</uib-carousel>
</div>

In CSS, use below

.pull-in{
.carousel-inner > .item > .container {width: 100%}
}

Also, make sure the picture size to be 170px by 220px i guess (need to check)

View solution in original post

Alikutty A · ‎05-20-2019

Hi,

Can you please change the width attribute to 100% in your image tag? ie

style="width:100%;height:225px"

Thanks!

Alikutty A · ‎05-20-2019

If this dint work, increase the width of your container to 100% by changing the following line

<div class="container" style="width:100%">

MR7 · ‎05-20-2019

It's still not working. Implementing width to 100% has created space both sides

Alikutty A · ‎05-21-2019

Seems like there is an additional margin add to the left of your parent div. Remove these widths, Right click on the carousel and click on Inspect element. You could see the same HTML and related styles. In the HTML part, click on the parent div ie class=pull-in and check the Sytles if there is any margin added to it.

Also you could try removing the class=pull-in, cant say much without looking into the CSS for this slider.