Full Width Slider not working?

Hello, I am doing a Django project and wanted to implement this css. It has been amazing so far but I can’t seem to get carousel-slider to work, the normal one seems to work but the full width one just doesn’t appear. Nothing in the console and its showing up in inspect page.

$(document).ready(function(){ $('.carousel').carousel(); }); - works

$(document).ready(function(){ $('.carousel.carousel-slider').carousel({full_width: true}); }); - doesn’t work

Here is my slider: <div class="carousel carousel-slider"> <a class="carousel-item" href="#one!"><img src="{% static 'img/banner2.jpg' %}"></a> <a class="carousel-item" href="#two!"><img src="{% static 'img/banner3.jpg' %}"></a> </div>

Does the full width one have any special requirements? I can’t seem to find anything on the website nor here on github. Thanks in advance 😃

[ddulic]

Changing:

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

to:

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

fixes the problem. Thanks @Sepehr13

EDIT:

I think I found the problem. It wasn’t the above issue. An issue was that the .carousel-slider element had a height of 0 set. Adding

.carousel-slider {
    height: 400px !important;
}

fixes the issue. Maybe a bug? Leaving open so it can be checked out.

[kartikchauhan]

I copied the following code from materialize.css to embed a full with carousel. $('.carousel.carousel-slider').carousel({fullWidth: true});

However, the above code didn’t work. I changed the above code to $('.carousel.carousel-slider').carousel({full_width: true}); and I worked like a charm.

Here’s the full code: $(document).ready(function(){ $('.carousel.carousel-slider').carousel({full_width: true}); });