Question

这是我的HTML代码：

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

这是我的Javascript代码：

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

滑块工作正常，但默认高度为400px。如何将其更改为300px？

编辑：

更改图像尺寸不会改变滑块的高度（高度始终为400px）

我试过这个：<div class="slider" style="height:300px;">，它也不起作用。

Answer 1

在JQuery中，我们可以如下设置高度和其他选项（mapstruct-mapping-with-cycles）：

$(document).ready(function(){

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

});

我们不需要为此更改图像尺寸。

Answer 2

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

在实现文档的“选项”部分中-您可以添加/编辑默认值。在jquery中，我不知道它是如何工作的，但是在纯JavaScript中很容易。

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

option参数get对象具有属性-您可以在链接中的文档上找到。例如：

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

Answer 3

尽管这个问题已经解决，但我只想分享另一个选择。默认情况下，滑块高度为400像素，因此，如果要更改默认值，我们需要使用！important 标签，例如波纹管。

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

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

Answer 4

只需添加！important

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

如何在Materialise css中更改滑块的高度？

4 个答案: