Open hamid-kamalpour opened 8 years ago
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.
+1. Having the exact same issue
Waste a lot of time, same issue.
+1
Should be really easy to reproduce, no?
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.
Same issue over here!
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。
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!
@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.
here is a quick css fix : // in your custom css file
min-height: 40vh !important (or whatever hight you need)
@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!
@samyilias, after a day of trying, finally that worked. Thank you.
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,
But when i change the image address to relative the carousel no longer show.
JFYI, the images address are correct and images loading correct but the .carousel.carousel-slider have wrong height.
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.