How to increase the size of carousel in materialize.css?

问题

I am trying to increase the size of carousel in materialize.css but couldn't get it. I have tried setting height but it didn't work. I googled it but couldn't find any solutions. Could anyone help me with this?

回答1:

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

this might help, place this code in your css and change width acording to your need.

回答2:

Set a minimum height that correlates to the actual height of the images you want to include. For me, that was 900px.

.carousel { 
min-height: 900px;
}

回答3:

after long trying, I figured out a solution that works for me:

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

Hope it helps!

回答4:

My carousel images were too big for the standard container. This is what I used, and my images are displaying perfectly now.

.carousel {
    height: 600px;
}

回答5:

I'm not sure if people are still having this issue, but I just ran against it recently and resolved it by setting the height of the image specifically, and leaving the other classes alone.

So instead of adjusting the size of the entire frame, just..

img { 
  height: 500px 
}

Working fiddle: https://jsfiddle.net/blankdev/Ls81k2ud/

I find that if you do nothing with Materialize's carousel, and feed it images with a maximum height of 400px it will just display them as is since the frame is set at that height.

回答6:

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

for .carousel use carousel instead of slider or see the documentation im materializecss for carousel in javascript and slider in media

回答7:

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

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

回答8:

i tested this answer and did not make changes, i tried to type my custom code in materialize.css file in bottom. #main .carousel{ height: 100vh; }

回答9:

I fixed the height problem with adapting the javascript initialization of the carousel. The height of the carousel is there normally defined as:

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

With adding a div containing the carousel and with the desired height (e.g. by flexbox) you can then add to the JavaScript:

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

This worked for me.

来源：https://stackoverflow.com/questions/37762139/how-to-increase-the-size-of-carousel-in-materialize-css

标签

html

css

material-design

carousel

materialize