Carousel init fires but doesn't show up until resize

[mcblum]

Hello! Working great except for this one issue. Once it loads, if I resize the page it shows up immediately. Is there a way to manually trigger a refresh of the carousel? Otherwise, any idea where I could begin diagnosing this issue?

Thank you! Matt

[josiahzimm]

Hey i'm running into this same issue, did you have any luck resolving this?

[Barralex]

Same problem here

[tonoyandev]

+1

[mcblum]

So I looked back at my code, and I know this problem has been more or less fixed but I cannot figure out how. There doesn't seem to be any change in the JS, so it must have been a CSS fix. Should it be of use to anybody, this is how I'm parsing our items for a carousel:

$onChanges() {
        const validCarouselItemsOnly = this._.filter(this.carousel, (item) => {
            return this._.get(item, 'image.url');
        });

        this.formattedCarousel = validCarouselItemsOnly.map((carouselItem) => {
            const linkIsValid = this._.get(carouselItem, 'link[0].model_hash');

            if (linkIsValid) {
                carouselItem.go = () => {
                    this.LinkService.go(carouselItem.link[0]);
                };
            } else {
                carouselItem.noLink = true;
            }

            if (this.itemHasNoText(carouselItem)) {
                carouselItem.noText = true;
            }

            return carouselItem;
        });
    }

We have this in the $onChanges block for some unknown reason, but the model doesn't actually change once the page is loaded. Also, we have some extra stuff in here to validate our carousel items. One more thing I noticed, we're also invoking our component in the following way:

<feature-carousel carousel="$ctrl.data.carousel" ng-if="$ctrl.data.carousel"></feature-carousel>

I wonder if this has something to do with it -- if you haven't already, try letting the component render only when the data is present.

Edit: I should mention all of the actual code for the carousel is in our featureCarousel component and the above code simply passes the data needed for the carousel to render. To actually fire up the carousel we're doing:

<ui-carousel class="carousel"
                 slides-to-show="1"
                 slides="$ctrl.formattedCarousel"
                 on-init="$ctrl.onCarouselInit()">

        <carousel-item class="item">
            <div class="item-wrapper" ng-click="item.go()" ng-class="{noLink: item.noLink, noGradient: item.noText}">
                <img ng-src="{{item.image.url + '?w=1600&h=800&fit=crop&crop=faces&auto=compress&q=50'}}"/>
                <div class="inner">
                    <div class="category" ng-show="item.category[0].name">
                        {{item.category[0].name}}
                    </div>
                    <span class="headline" ng-show="item.headline">
                        <h2>{{item.headline}}</h2>
                    </span>
                    <div class="more" ng-hide="item.noLink">
                        Read more
                    </div>
                </div>
            </div>
        </carousel-item>

        <carousel-prev>
            <i class="icon ion-arrow-left-b"></i>
        </carousel-prev>

        <carousel-next>
            <i class="icon ion-arrow-right-b"></i>
        </carousel-next>
    </ui-carousel>