如何在Materialise css中更改轮播的默认大小?

时间:2017-07-24 18:39:56

标签: css materialize

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

1 个答案:

答案 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>