How to change height of slider in Materialize css? - materialize

Question

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.

Answer 1

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.

Answer 2

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

Answer 3

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>

Answer 4

Just add !important
<div class="slider" style="height:300px !important;">