我想减小旋转木马的大小,使其不覆盖整个屏幕高度。我尝试将旋转木马的父div包装在另一个div中,并将其高度设置为300px并溢出到隐藏。然而,问题在于它隐藏了底部的指标。
答案 0 :(得分: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>