Carousel doesn't work with relative images address

Hi,

Seems the carousel component just working with absolute image address and when i set the direct/relative image address it goes disappear.

the following codes working well,

$('.carousel.carousel-slider').carousel({full_width: true});

<div class="carousel carousel-slider">
    <a class="carousel-item" href="#one!"><img src="http://lorempixel.com/800/400/food/1"></a>
    <a class="carousel-item" href="#two!"><img src="http://lorempixel.com/800/400/food/2"></a>
    <a class="carousel-item" href="#three!"><img src="http://lorempixel.com/800/400/food/3"></a>
    <a class="carousel-item" href="#four!"><img src="http://lorempixel.com/800/400/food/4"></a>
</div>

But when i change the image address to relative the carousel no longer show.

$('.carousel.carousel-slider').carousel({full_width: true});

<div class="carousel carousel-slider">
    <a class="carousel-item" href="#one!"><img src="assets/images/slide2.jpg"></a>
    <a class="carousel-item" href="#two!"><img src="assets/images/slide2.jpg"></a>
    <a class="carousel-item" href="#three!"><img src="assets/images/slide2.jpg"></a>
    <a class="carousel-item" href="#four!"><img src="assets/images/slide2.jpg"></a>
</div>

JFYI, the images address are correct and images loading correct but the .carousel.carousel-slider have wrong height.

.carousel.carousel-slider {
    top: 0;
    left: 0;
    height: 0;
}

<div class="carousel carousel-slider">
            <div class="carousel-item" style="z-index: 0; opacity: 1; transform: translateX(0px) translateX(0px) translateX(0px) translateZ(0px);">
                <div class="row">
                    <h4>Test</h4>
                    <h5>Test</h5>
                    <div class="col l6">
                        <p> Test  </p>
                    </div>
                    <div class="col l6">
                        <img src="./assets/images/slide2.jpg">
                    </div>
                </div>
            </div>
        </div>

So I’ve tested following address structure,

./assets/images/slide2.jpg -> doesn’t work

/assets/images/slide2.jpg -> Doesn’t work

assets/images/slide2.jpg -> doesn’t work

so I’ve added the random number as a parameter to end of above link to avoiding the cache issue.

./assets/images/slide2.jpg?555576 -> doesn’t work

but when i using the absolute url for image it goes resolve,

http://example.com/assets/images/slide2.jpg -> **Workin’ welllllll!!! 😐 ** example.com/assets/images/slide2.jpg Doesn’t work www.example.com/assets/images/slide2.jpg Doesn’t work

it’s better that i say the carousel component just working with http/https protocol image address.😐 So the slider component working well with both address method and all above address.

finalize, I haven’t any issue on the browser console.

Please advice.

[samyilias]

here is a quick css fix : // in your custom css file

  min-height: 40vh !important  (or whatever hight you need)

[mikekeda]

@kmmbvnr I debugged this, sometimes load event isn’t triggered. I solved this with my custom js (before carousel initialization):

$(‘.carousel.carousel-slider’).each(function() { var view = $(this); var firstImage = view.find(‘.carousel-item img’).first(); var imageHeight = firstImage[0].naturalHeight; if (imageHeight > 0) { view.css(‘height’, imageHeight / firstImage[0].naturalWidth * view.width()); } else { view.css(‘height’, 400); } });

P.S. I think the problem isn’t in relative images address, for me the bug was in 40% page loads for relative image address and 20% with absolute image address.