materialize: 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 😃
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Reactions: 2
- Comments: 23
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
fixes the issue. Maybe a bug? Leaving open so it can be checked out.
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}); });It fails if initialized after the first image was loaded.
codepen