change size of Carousel materialize

Asked

Viewed 358 times

-1

body{
    margin: 0; padding: 0; box-sizing: border-box;
}
img{width: 100%;}
.pagina{widows: 100%; height: 100%; margin-left: auto; margin-bottom: auto;}

.topo{width: 100%; height: 100px; border: 5px solid rgb(196, 20, 172);}
.carousel-fixed{height: 100px;}
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/estilo.css">
    <link rel='icon' href='imagens/icone.png' type=”image/x-icon”>
    <title>pagina inicial mobile</title>
    <link rel="stylesheet"   href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
<link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

 <!-- Compiled and minified CSS -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

 <!-- Compiled and minified JavaScript -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>         

</head>
<body>
    <div class="pagina">
        <header class="topo carousel carousel-slider center">            
            <div class="carousel-fixed-item center">
                
                </div>
                <div class="carousel-item red white-text" href="#one!">
               <img src="imagens/01.jpg">
                </div>
                <div class="carousel-item amber white-text" href="#two!">
                        <img src="imagens/02.jpg">
                </div>
                <div class="carousel-item green white-text" href="#three!">
                        <img src="imagens/03.jpg">
                </div>
                <div class="carousel-item blue white-text" href="#four!">
                        <img src="imagens/04.jpg">
            </div>        
        </header>




    </div><!--/.pagina-->

  <script>
        var instance = M.Carousel.init({
    fullWidth: true,
    indicators: true
  });

  // Or with jQuery

  $('.carousel.carousel-slider').carousel({
    fullWidth: true,
    indicators: true
  });
      
  </script>
</body>
</html>

hello would like to know how I change the size of my Carousel?
you may notice that it’s taking my screen almost all over. I want to decrease it to a 250 px height .
to set a size for the parent element of my Carousel no longer working
I have already selected for several classes that are in the cog and nothing changes
check the image there is a size that I can’t change at allinserir a descrição da imagem aqui

html css materialize carousel

  • could put in the code part so we can understand and help

  • @Dbaalone ta ai o codigo .

  • so it’s easier for us to check

  • @Dbaalone I tried to change the size by css by selecting by classes and in no way it changes

  • But change how? How do you want it to look?

  • you put in header... I have little knowledge in this part but as far as I know is not recommended, try to put in a main div to see if it takes this attribute

  • @Dbaalone was worth I’ll do a test here

  • @hugocsl I want it to stay the size I set

  • @hugocsl Voce can notice that you’re taking my screen almost all over. I want to decrease it to a 250 px height

  • try to remove the fullWidth property or set the false value

Show 5 more comments

1 answer

1

You’re trying to resize the slider, but the correct thing is usually to resize the content within the slider. So don’t put the height in the class topo or carousel-fixed put right into the image.

I put the 100px height in CSS straight to tag img {}, but you can create a class to put in the image or as you think best.

inserir a descrição da imagem aqui

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css/estilo.css">
  <link rel='icon' href='imagens/icone.png' type=”image/x-icon”>
  <title>pagina inicial mobile</title>
  <link rel="stylesheet"   href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
<link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>       

<style>
body{
  margin: 0; padding: 0; box-sizing: border-box;
}
img{width: 100%; height: 100px !important; object-fit: cover;}
.pagina{widows: 100%; height: 100%; margin-left: auto; margin-bottom: auto;}

.topo{width: 100%; height: 100px; border: 5px solid rgb(196, 20, 172);}
.carousel-fixed{height: 100px;}
</style>

</head>
<body>
  <div class="pagina">
      <header class="topo carousel carousel-slider center" style="height: 100px !important">            
          <div class="carousel-fixed-item center">
              
              </div>
              <div class="carousel-item red white-text" href="#one!">
             <img src="https://picsum.photos/180/80">
              </div>
              <div class="carousel-item amber white-text" href="#two!">
                      <img src="https://picsum.photos/280/80">
              </div>
              <div class="carousel-item green white-text" href="#three!">
                      <img src="https://picsum.photos/180/80">
              </div>
              <div class="carousel-item blue white-text" href="#four!">
                      <img src="https://picsum.photos/280/80">
          </div>        
      </header>




  </div><!--/.pagina-->

<script>
      var instance = M.Carousel.init({
  fullWidth: true,
  indicators: true
});

// Or with jQuery

$('.carousel.carousel-slider').carousel({
  fullWidth: true,
  indicators: true
});
    
</script>
</body>
</html>

Browser other questions tagged html css materialize carousel

You are not signed in. Login or sign up in order to post.