Materialize: Full Width Slider not working?

[ddulic]

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 :)

[kikdu]

the same here...

I'm searching...

[Sepehr13]

mine works perfectly!
maybe you shouldn't use $(document).ready , i'm using $(function() {});

[kikdu]

Can you send us your full code please ?

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

[acburst]

It probably has something to do with the way your images are loaded. The carousel is probably initialized before the images are loaded so it has no way to know what the height is. Im not too familiar with Django, but try playing around with the order of how things are initialized

[ddulic]

@acburst Just forcing the height to be 400 fixes everything. I tried moving the js and slider around, didn't help at all. Regarding how Django loads the files, there is only this single way I am aware of. But like I said, setting the height to 400 fixes everything :)

[PapePathe]

Overring the css works but the slider items are not displaying, the window is just empty nothing showed

[sayjeyhi]

@PapePathe I have same problem with pape ... empty is showing

[gazozman]

Please try with remove

$('.carousel').carousel();

[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}); });

[lucksp]

I am also having an issue with carousel & slider, using Materialize v0.98.0. Other JS components seem fine.
Just copied/pasted the code from main website

using jQuery 2.1.1 from https://code.jquery.com/jquery-2.1.1.min.js
init: $( document ).ready(function(){$('.carousel.carousel-slider').carousel({full_width: true});})
html:

<section id="">
        <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>
    </section>

Tried without the full_width and documented fullWidth too, but no luck. Seems like the "initialized" class is not being added to the main div, like in the example. I tried the text only example too just in case there was something with the example images.

also have tried adding a after loading all js scripts, just incase...

SOLVED: For ANGULAR:
Using route & ng-view - you must wait until the view is loaded, or else the .carousel div will not be in the DOM and jQuery cannot locate. Added this to my controller:

$scope.$on('$routeChangeSuccess', function () {
                $('.carousel').carousel();
    });

[jeissonvalde]

Verifica que las versiones de materialize-css y jquery sean las mismas que requieren aquí:
Verify that the materialize-css and jquery versions are the same as they require here:
http://materializecss.com/getting-started.html
Es la solución sin forzar cambios en el css

[athebomb]

@kartikchauhan this worked like a charm. It was starting to stress me out!

Change
{fullWidth: true} <-- doesn't work

To
{full_width: true} <--works

[fega]

the example is working on 0.98.2

http://materializecss.com/carousel.html

codepen:
https://codepen.io/fega/pen/NjqMvz

Closed, feel free to reopen it if it is still necessary. But please provide a way to reproduce it. like a codepen

[Wesitos]

It fails if initialized after the first image was loaded.

codepen

[fega]

@Wesitos why do you have all of this code

 $('.carousel.carousel-slider')
    .find('.carousel-item img')
    .first()
    .on('load', function(){
      // For some reason, it works if called two times
      $('.carousel.carousel-slider').carousel({fullWidth: true});
      //$('.carousel.carousel-slider').carousel({fullWidth: true});
    })

instead of using $('.carousel.carousel-slider').carousel({fullWidth: true}); in document ready?

[Wesitos]

@fega That's just to reproduce the case when it's called after the image has loaded.

[jestersoftware]

@Wesitos saying

It fails if initialized after the first image was loaded.

is correct.

So, the example in the docs does work, _assuming_ you're not using anything like React, Angular, or Vue. But most people are these days.

[akakalle]

I'm also still having this issue. Setting a fixed height solves the problem but on my current project I need the height to be responsive. Anyone having any luck solving this? Right now I have a 50/50 chance of the Carousel showing up. Using good old PHP to render the page and the example page is working for me. Can wrap my head around why it's failing half of the times?

[tdotholla]

I'm using meteor and calling an API to get images to fill carousel.
carousel doesn't render when called before images are called, so i set so that when the 'template' is rendered, it calls $('.carousel.carousel-slider').carousel({fullWidth: true}) when each image loads... so sometimes it is called 10 times or more..
It seems that the first carousel object i look at works, and then all other carousels do not when called, (because maybe i'm calling .carousel() multiple times like @Wesitos mentioned?

oh and i'm forcing height on the carousel with css, so it's always there, just no images.
sometimes i'll call $('.carousel.carousel-slider').carousel({fullWidth: true}) in the browser console, just to see if my code didn't call it; but no results. Seeing @Wesitos codepen and looking at my code, it looks as though if i call it multiple times, i break the carousel

[pruthvim96]

i am also facing the same situation before signin the slider works damn good after signin the slider stretches out and slider doesn't work at all

please give me solution as early as possible thanks in advance

[harri00413]

Still sort of same issue here. when you have a materialboxed carousel item. After closing of the materialbox image the carousel has height 0. Anybody ideas?

[Koko-Dev]

Having the same exact problem.. The only thing I can figure is that materialize no longer works with jquery. They have abandoned it. So, the recommended code is here: https://materializecss.com/carousel.html