Full Width Carousel Slider Height Not Initialized Correctly

Expected Behavior

A .carousel-slider Carousel with fullWidth: true option should initialize it’s height in proportion to the current window width also if the first image hasn’t loaded completely at the time of carousel initialization.

Current Behavior

A .carousel-slider Carousel with fullWidth: true option doesn’t initialize it’s height in proportion to the current window width if the first image hasn’t loaded completely at the time of carousel initialization. Instead it initializes itself to the default height (400px) which may leave a gap below the carousel if the images are not that high.

Possible Solution

The bug seems to be in materialize/js/carousel.js:

    _setCarouselHeight(imageOnly) {
      let firstSlide = this.$el.find('.carousel-item.active').length
        ? this.$el.find('.carousel-item.active').first()
        : this.$el.find('.carousel-item').first();
      let firstImage = firstSlide.find('img').first();
      if (firstImage.length) {
        if (firstImage[0].complete) {
          //...
        } else {
          // Get height when image is loaded normally
// next line changed: single event function parameter "ev"
          firstImage.one('load', function (ev) {
// next line changed: get offsetHeight from "ev.target"
            _this65.$el.css('height', ev.target.offsetHeight + 'px');
          });
        }
      } else if (!imageOnly) {
        let slideHeight = firstSlide.height();
        this.$el.css('height', slideHeight + 'px');
      }
    }

Original code seems to assume getting an element reference as parameter to the ‘load’ event handler because calls it el and tries to get offsetHeight from this parameter which of course fails.

Steps to Reproduce

Seems to occur only with many and large images in the carousel.

Your Environment

Seems not to be relevant here.

[harri00413]

Looks like Materialize is no longer maintained.

[josh432]

Hello, I’m encountering this carousel bug with large images (about 13 images). The carousel sometimes shrinks to 400px on page load. I couldn’t figure out why it was doing this for days but I finally thankfully found this issue. I’m using the materialize cdn. Will this issue be resolved/closed? Thanks!