实现全宽滑块

Question

I use materializecss to create a slider. However the image is full width, but not full height(its more than full height, so i get scrollbars). What do i need to change to make the slider fill out my screen with no scrollbars? I also use $('.slider').slider({full_width: true});

<div class="navbar-fixed">
    <!-- some stuff-->
</div>
<div class="container-fluid">
    <div class="carousel carousel-slider center">
        <a class="carousel-item"><img class="responsive-img" src="http://lorempixel.com/800/400/food/1"></a>
    </div>
</div>

Answer 1

If you just want to hide scrollbars then add

overflow: hidden;

To container which is having the scroll

Answer 2

Are you using the correct JavaScript?

On Materialize's site (I've used Materialize before, and thought something looked off about your code) it has this as the way to initialize a slider as "full_width:"

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

In fact, your slider doesn't even have the .slider class; it only has .carousel-slider and .carousel.

I'm thinking if you use the above JavaScript you should be alright.