Search code examples
javascriptjqueryhtmlcssmaterialize

Materialize Carousel with Images disappears

I am using Materialize.js for some of the components and JS libraries they have available. One that I have been using is the 'carousel' component. I have it set up with three slides each with an <h5> and a <p> element in the slide container. This shows up exactly how it's expected. Once I add an <img> element into the slide, the entire carousel disappears. Here is what I am talking about:

working Carousel code: 

<div class="carousel carousel-slider center z-depth-5" data-indicators="true">
    <div class="carousel-fixed-item center">
        <paper-button raised class="carousel_button" id="top_button">Download Now</paper-button>
    </div>
    <div class="carousel-item white-text" href="#one" id="c_one">
        <div class="carousel_item_inner">
            <h5>Plan</h5>
            <p class="white-text">This is your first panel</p>
        </div>
    </div>
    <div class="carousel-item white-text" href="#two" id="c_two">
        <div class="carousel_item_inner">
            <h5>Create</h5>
            <p class="white-text">This is your second panel</p>
        </div>
    </div>
    <div class="carousel-item white-text" href="#three" id="c_three">
        <div class="carousel_item_inner">
            <h5>Generate</h5>
            <p class="white-text">This is your third panel</p>
        </div>
    </div>
</div>

and JS:[EDITTED] 

$(document).ready(function() {
                $('.parallax').parallax();
                $('.carousel.carousel-slider').carousel({full_width: true});
                $('.scrollspy').scrollSpy();
                $('.stat_circles').addClass('animate');
            });

Here is what it looks like:

enter image description here

Once I add an <img> element into one of the .carousel_item_inner <div>'s, the carousel completely disappears. Here is one of the carousel-item's with the <img>:

<div class="carousel-item white-text" href="#one" id="c_one">
    <div class="carousel_item_inner">
        <h5>Plan</h5>
        <p class="white-text">This is your first panel</p>
        <img src="images/plan.PNG">
    </div>
</div>

And here it is after that <img> element is there:

enter image description here

Really confused as to why the entire carousel disappears with an <img> in the slide container. All help is very appreciated, thanks in advance!

Here is a link to the Materialize Carousel as well: http://materializecss.com/carousel.html

EDIT:
Here is a jsfiddle

https://jsfiddle.net/5cjaduwv/9/

Solution

  • just for a sanity check can you try wrapping that js in a document ready. It may be that the js is called before your image is loading. Also be sure you are loading those scripts at the bottom of your page as you may have images taking too long to load which are dependent on the libs.

            // Load your JS files here in order of dependencies 
        // such as: jQuery, Bootstrap, other libs and lastly your custom js files
        // KEEP your CSS files in the head of your template.
        <script>
            $(function(){
                $('.carousel.carousel-slider').carousel({full_width: true});
            });
        </script>
    </body>
</html>

    I was able to reproduce your error in a fiddle and it came down to JS dependencies with jQuery and materialize. Can you share your list of scripts and where they are located. I usually keep them at the end of body so the DOM loads first. jQuery should be the first lib with the others following below it.