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

[MR7]

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]

The CSS part is empty

[MR7 · Accepted solution]

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)

[Robbie3]

Great That worked for ME!!!!

[Miguel Donayre]

you can also try putting this code in the CSS section of the carousel widget 

.carousel-control.right,
.carousel-control.left {
    background: transparent!important; 
}

[dman2969]

Hi all,

Just in case anyone had this issue in their carousel and none of these solutions worked for them. I'd like to share the solution that finally worked for me.  I used the solution someone offered to make the background transparent at first but the problem with that is when the picture slides, you see it in the background in that margin, and it didn't look great.

In the end the solution was easy, though it took my forever to figure it out.. You just had to remove the padding on the outer container, where you put your carousel.

In my case the container the carousel was in had this padding setting...

.container.ng-scope {
      padding: 0px 15px;
}

So that 15px was screwing the pooch, because box-sizing was set to put a boarder around everything.

So I added the below change top the main portal page css (csm_index in my case, not the carousel widget) and Bob's your uncle, problem solved.

.container.ng-scope {
       padding: 0px 0px !important;
}

This removes the container padding and the !important, makes sure it overrides any other settings that may conflict with it.

Hope this helps.