javascript - 你如何改变javascript slider 的大小

Question

过去 2 小时我一直在尝试更改内容 slider 的大小，但仍然没有成功。

这是我的 html 文档顶部的内容:

<script>
    $(function() {
        $('#slides').slidesjs({
            width: 1500,
            height: 350,
            play: {
                active: true,
                auto: true,
                interval: 4000,
                swap: true
            }
        });
    });
</script> 

这里是我在 html 和容器中插入图像的地方:CSS:

.container {
    margin-top:0px;
    margin-left:250px;
    -webkit-filter: grayscale(100%);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;      
}
.container:hover{
    -webkit-filter: grayscale(0%);
}

HTML:

<div class="container">
    <div id="slides" >      
        <a href="timetablenotts.html"><img src="img/timetableNotts.png" </a>
        <a href="timetablenotts.html"><img src="img/timetableNotts.png" </a>
    </div>
</div>

由于某种原因增加宽度会降低高度，但对宽度没有任何影响!我很困惑!请帮忙，谢谢!

Answer 1

此 slider 使用 Bootstrap 和一些媒体查询，并用作响应式 slider 。这是一个很好的功能。你会找到完整的例子in this package

除了 slider 配置设置之外，要更改您需要的大小...您需要更改不同媒体查询中的 .container。

例如，在标准示例的第 143 行中，您会发现这个尺寸:

  .container {
    width: 1170px
  } 

您可以更改为:

  .container {
    width: 100%
  }

这里是整个尺寸..你会在 HTML 中找到内联

/* For tablets & smart phones */
@media (max-width: 767px) {
  body {
    padding-left: 20px;
    padding-right: 20px;
  }
  .container {
    width: auto
  }
}

/* For smartphones */
@media (max-width: 480px) {
  .container {
    width: auto
  }
}

/* For smaller displays like laptops */
@media (min-width: 768px) and (max-width: 979px) {
  .container {
    width: 724px
  }
}

/* For larger displays */
@media (min-width: 1200px) {
  .container {
    width: 100%
  }
}