How to change height of slider in Materialize css?

materialize background image
materialize slider change height
materialize carousel
materialize carousel autoplay
materialize css full screen
materialize css examples
materialize carousel image size
materialize gallery

Here is my html code:

<div class="slider">
  <ul class="slides">
    <li>
      <img src="img/s1.jpg">
    </li>
  </ul>
</div>

And Here is my Javascript code:

$(document).ready(function(){
    $('.slider').slider();
});

Slider works perfectly but the height is 400px by default. How can I change it to 300px?

EDIT:

Changing image size doesn't change the height of slider (height is always 400px)

I tried this: <div class="slider" style="height:300px;"> , it also doesn't work.

In JQuery we can set the height and other options (https://materializecss.com/media.html) like the following:

$(document).ready(function(){

    $('.slider').slider({ 
        full_width: true,
        height : 800, // default - height : 400
        interval: 8000 // default - interval: 6000
    });

});

We don't need to change image dimensions for that.

How to increase the size of carousel in materialize.css?, Materialize is a modern responsive CSS framework based on Material Design by Google. Original width of image. originalHeight, Number, Original height of image. You can also have indicators that show up on the bottom of the slider. SideNav in Materialize CSS. Having discussed and incorporated the Navbar on your website, know how to increase the default Navbar height. When we examine the default Navbar in Materialize CSS, the min-height is approximately 64px. If you are to fix a logo on the navbar, your logo should have a max-height of 64 px, else the logo will not be accommodated fully in the Navbar height.

https://materializecss.com/media.html#slider

In OPTION section in the materialize docs - you can add/edit defoult values. in jquery I don't know how it work but in pure javaScript is easy.

document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.slider');
var instances = M.Slider.init(elems, options);
});

The option parameter get object with properties - that you can find on the docs in the link. For example:

document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.slider');
var instances = M.Slider.init(elems, {'height' : 770, 'indicators' : true});
});

Media, If you resize the screen you see that the width is always 100% but the height changes and is in my opinion always good. But with the Materialize slider the height  When a user clicks on an image that can be enlarged, Material box centers the image and enlarges it in a smooth, non-jarring manner. To dismiss the image, the user can either click on the image again, scroll away, or press the ESC key.

Although this issue is already solved i just want to share another option. By default slider height is 400px so if we want to change default value we need to use !important tag like bellow.

<style>
   .slider{
      height: 300px!important;
   }
</style>

    <div class="slider">
      <ul class="slides">
        <li>
          <img src="img/s1.jpg">
        </li>
      </ul>
    </div>

Need help with aspect ratio on Materialize CSS slider : web_design, We do not recommend changing the slider in responsive modes as it is already and locate the Custom Styling section; Enter the following into the Custom CSS box: If you made the slider taller, you may also need to adjust the height in the​  Images can be styled in different ways using Materialize Responsive Images To make images resize responsively to page width, you can add the class responsive-img to your image tag.

Full-Width Slider: How to change the slider height, Solution 3 (CSS) Set .slick-slide img height to so it equals the height of the tallest image in your slider. Downside: as these are images and you can't  Our Carousel is a robust and versatile component that can be an image slider, to an item carousel, to an onboarding experience. It is touch enabled making it especially smooth to use on mobile.

How to increase the size of carousel in materialize.css?, The .carousel div is limited to a height of 400px. Sometimes, an ever In materialize.css change: How can i make the slider use auto height? Line length stays between 45-80 characters and line height scales to be larger on smaller screens. To see Flow Text in action, slowly resize your browser and watch the size of this text body change! Use the button above to toggle off/on flow-text to see the difference!

Swipeable tabs carousel height limited to 400px · Issue #4159 , I want to include an image-slider with indicators (little dots on the Can anybody help me with setting up the correct html/css code so that the  Veamos como crear un SLIDER HTML diferente al de BOOTSTRAP, de una manera rápida y fácil utilizando MATERIALIZE CSS, un framework de CSS que utiliza Material Design, los diseños de Google!

Comments
  • try giving max-height:300px
  • Also, if you replicate it somehow via snippet, then it will be helpful for us to understand..
  • Giving max-height:300px doesn't work
  • I found a solution, $('.slider').slider({height:300}); solved my issue. Thank you for your comment.