Why is MDB Carousel showing empty starting slide on page loa


Topic: Why is MDB Carousel showing empty starting slide on page load?

gvt asked 2 years ago

Hello everyone,

I am trying to use the MDB carousel for a simple image slider in an angular project. All my images are within the apps asset folder, I set up an interface with the required parameters, grabbing my array from the json using the httpClient and did some basic configuration to get started.


*Expected behavior*when loading the page the slider should show the first image and show controls to move through the three images provided


*Actual behavior*when loading the page the slider shows up empty and logs an error (see below), as soon as I click on the next slide all the images show up and it works like a charm


Resources (screenshots, code snippets etc.) Error: ERROR Error: Uncaught (in promise): TypeError: Cannot set properties of undefined (setting 'active')TypeError: Cannot set properties of undefined (setting 'active') at MdbCarouselComponent.\_setActiveSlide (mdb-angular-ui-kit-carousel.mjs:162:9) at mdb-angular-ui-kit-carousel.mjs:137:18 at \_ZoneDelegate.invoke (zone.js:372:26) at Object.onInvoke (core.mjs:26231:33) at \_ZoneDelegate.invoke (zone.js:371:52) at Zone.run (zone.js:134:43) at zone.js:1275:36 at \_ZoneDelegate.invokeTask (zone.js:406:31) at Object.onInvokeTask (core.mjs:26218:33) at \_ZoneDelegate.invokeTask (zone.js:405:60) at resolvePromise (zone.js:1211:31) at zone.js:1282:17 at \_ZoneDelegate.invokeTask (zone.js:406:31) at Object.onInvokeTask (core.mjs:26218:33) at \_ZoneDelegate.invokeTask (zone.js:405:60) at Zone.runTask (zone.js:178:47) at drainMicroTaskQueue (zone.js:585:35)

upper half is on page load, no image but controls showing, lower half is after clicking on any control element

this is my component template file, sliderArray is an array of objects with the required params

  <mdb-carousel [controls]="true" [indicators]="true" [animation]="'slide'" [interval]="0">
      <mdb-carousel-item *ngFor="let i of sliderArray">
        <img
          src="{{i.src}}"
          class="{{i.class}}"
        />
        <div class="carousel-caption d-none d-md-block">
          {{i.text}}
        </div>
      </mdb-carousel-item>
    </mdb-carousel>

What am I missing here?


Arkadiusz Idzikowski staff answered 2 years ago

The component is probably trying to set the first active image, but in this case, you load images asynchronously and the image is not available on component initialization. We will check if we can somehow resolve this problem on our end.

As a workaround for now, please try to delay component initialization and wait until all the images are loaded. You can do that by adding ngIf directive to the <mdb-carousel> element.

<mdb-carousel *ngIf="sliderArray.length">...</mdb-carousel>

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Open

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: MDB5 2.3.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No