Question

过去2小时我一直在尝试更改内容滑块的大小，但仍然没有运气。

所以这就是我在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

您尚未关闭img标记。

    <a href="timetablenotts.html"><img src="img/timetableNotts.png" </a>

应该是：

    <a href="timetablenotts.html"><img src="img/timetableNotts.png" /></a>

Answer 2

此滑块使用引导程序和一些媒体查询，并作为响应滑块使用。这是一个很好的功能。你会找到完整的例子in this package

除了滑块配置设置之外还要更改所需的大小...您需要在不同的媒体查询中更改.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%
  }
}

如何更改javascript滑块的大小

2 个答案: