Frezzley Frezzley - 20 days ago 12
AngularJS Question

Ng-bootstrap Carousel refuses to show Images

I'm upgrading from an old version of bootstrap (0.13.4 & 0.14.1) to a new version of it.

The old slider worked just fine, but doesn't show any images anymore, when the new file is in use.
This makes sense, due to the fact, that the syntax of bootstrap has changed since that version.

This is the Original Code:

<div class="ecp-carousel">
<uib-carousel interval="5000" no-wrap="false">
<uib-slide ng-repeat="slide in e.slides " active="slide.active">
<div class="slidcontainer clearfix">
<img ng-src="{{slide.image}}" style="margin:auto;">
</div>
</uib-slide>
</uib-carousel>
</div>


This is the code I came up with:

<div class="ecp-carousel">
<div uib-carousel interval="5000" no-wrap="false" class="carousel-indicators">
<div uib-slide ng-repeat="slide in e.slides" index="slide.id" class="item">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="slidcontainer clearfix">
</div>
</div>
</div>
</div>


Now, it doesn't display any images unless, you manually go to the Inspector in your Browser(Ctrl + Shift + I ) inspect the Code and add the class "active" by hand, to that one image, that should be displayed.

But the controls still won't work. And if you do this with multiple Images, they'll all be displayed below each other.

This is the documentation of the slider:
https://angular-ui.github.io/bootstrap/

I hope someone can help me.

Thank you guys (and girls).

Answer

The Problem was, that the index was not specified. The carousel activated multiple slides at it's own discretion and therefore an error occured (that it couldn't handle), because it wasn't shure of which slide to display. (Because there were multiple active slides) So the carousel broke an nothing was displayed.

This is the final view:

    <div class="ecp-carousel">
        <div uib-carousel interval="5000" no-wrap="false">
            <div uib-slide ng-repeat="slide in e.slides track by slide.id" index="slide.id" class="item">
                <img ng-src="{{slide.image}}" style="margin:auto;">
            </div>
        </div>
    </div>

The Error was in the Controller, not in the view.

Comments