css - 如何更改 Materialize css 中轮播的默认大小？

Question

我想减小轮播的尺寸，使其不会覆盖整个屏幕的高度。我尝试将旋转木马的父 div 包装在另一个 div 中，并将其高度设置为 300px 并将溢出设置为隐藏。然而，问题在于它隐藏了底部的指示器。

Answer 1

尝试在具有指示符的 div 上设置 CSS bottom: 0;。

更新

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