Question

我试图在materialize.css中增加轮播的大小但是无法获得它。我试过设置高度，但没有用。我用Google搜索但找不到任何解决方案。有人可以帮我这个吗？

Answer 1

.carousel .carousel-item {
width:300px !important;}

这可能有所帮助，将此代码放在您的CSS中并根据您的需要更改宽度。

Answer 2

设置与要包含的图像的实际高度相关的最小高度。对我来说，这是900px。

.carousel { 
min-height: 900px;
}

Answer 3

$(document).ready(function(){
    // initialisation pour le caroussel

    $('.slider').slider({
        indicators:false,
        **height:625.5**,// define your height here
        transition:500,
        interval:6000
    });
});

Answer 4

我的旋转木马图像对于标准容器来说太大了。这就是我使用的，现在我的图像显示完美。

.carousel {
    height: 600px;
}

Answer 5

我不确定人们是否还有这个问题，但我最近反对它，并通过专门设置图像的高度来解决它，并让其他类别单独。

因此，不是调整整个帧的大小，而是..

img { 
  height: 500px 
}

工作小提琴：https://jsfiddle.net/blankdev/Ls81k2ud/

我发现如果你没有对Materialise的旋转木马做任何事情，并且给它提供最大高度为400px的图像，它将只显示它们，因为框架设置在那个高度。

Answer 6

 $(document).ready(function(){
    $('.slider').height(300);
    $('.slides').height(250);
});

for .carousel使用轮播而不是滑块或在javascript和媒体中的滑块中查看文档im materializecss for carousel

Answer 7

长时间尝试之后，我想出了一个对我有用的解决方案：

.carousel .carousel-item>img {
    width: 230%; //there you set the width
    margin-left: -70%; //this is the centering of carousel (in original, it is a bit off to the right)
}

希望有帮助！

Answer 8

我测试了这个答案并没有做出改变，我试图在底部的materialize.css文件中键入我的自定义代码。 #main .carousel{ height: 100vh; }

Answer 9

我通过调整轮播的javascript初始化解决了高度问题。轮播的高度通常定义为：

    $("your-carousel").carousel({fullWidth: true,}).height(400);

通过添加一个包含轮播并具有所需高度的div（例如，通过flexbox），您可以将其添加到JavaScript：

var carouselHeight = document.getElementById("carouselContainer").clientHeight;
$("your-carousel").carousel({fullWidth: true,}).height(carouselHeight);

这对我有用。

如何在materialize.css中增加轮播的大小？

9 个答案: