How do I change the default size of the carousel in Materialize css?

I want to decrease the size of the carousel so that it is not covering the entire height of the screen. I tried wrapping the parent div of the carousel in another div and setting its height to 300px and overflow to hidden. However the problem with that is that it hides the indicators at the bottom.

Solution

try to set the CSS bottom: 0; on the div that have the indicators.

UPDATE

.carousel {
  max-height: 300px
}

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

.carousel {
  max-height: 220px
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.min.css" rel="stylesheet"/>

<div class="carousel carousel-slider center" data-indicators="true">
  <a class="carousel-item" href="#one!"><img src="https://lorempixel.com/800/400/food/1"></a>
  <a class="carousel-item" href="#two!"><img src="https://lorempixel.com/800/400/food/2"></a>
  <a class="carousel-item" href="#three!"><img src="https://lorempixel.com/800/400/food/3"></a>
  <a class="carousel-item" href="#four!"><img src="https://lorempixel.com/800/400/food/4"></a>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/js/materialize.min.js"></script>