Materialize: Carousel doesn't work with relative images address

[hamid-kamalpour]

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.

[acburst]

Im not sure exactly whats happening but i've tested this locally and it is working. The height will be set dynamically by the plugin.

[ranneyd]

+1. Having the exact same issue

[AlyonaArt]

Waste a lot of time, same issue.

[kmmbvnr]

Someone who has a problem needs to debug and see what happens here.

[JuanSomniis]

+1

[ranneyd]

Should be really easy to reproduce, no?

[Rushal]

Same here. If I copy and paste the code from the site it'll show up. The second i change an image it disappears and has no height.

Seems to be an issue testing locally. When I upload the files, it works.

[franckstifler]

Same issue over here!

[woodcoding]

Got a same problem here。If first item is src="http://lorempixel.com/800/400/food/1"， next is local link，it is work。But if first is local link，whatever next is， it can not work。And if i set two carousel， if the first can work， whatever link the next link is，the second carousel is work。

[yorch747]

I had solved it just adding a new option, startHeight, and adding some lines after in materialize.js then minify it:

Finally
$('.carousel.carousel-slider').carousel({fullWidth: true,startHeight: '450px'});

hope it helps!

[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.

[samyilias]

here is a quick css fix :
// in your custom css file
```.carousel.carousel-slider.initialized
min-height: 40vh !important (or whatever hight you need)

[filiperodrigues1992]

@samyilias I had to answer you, after almost two days trying to fix, your answer finally worked. My issue was that the images were generated by meteor helper, which for some reason is done after. So the carousel was there, i could see it on the inspect, but it didn't show anything. So THANK YOU VERY MUCH!

[AkashTike]

@samyilias, after a day of trying, finally that worked. Thank you.