如何更改JavaScript滑块的大小

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

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

增加宽度由于某种原因降低高度，没有东西是d一个宽度！我很困惑！请帮助，谢谢！

来源

2014-01-11 user3076196

您能否在[jsfiddle]（http://jsfiddle.net/）上创建一个工作演示？ – lukasgeiter

增加宽度会降低高度，因为CSS会使用响应式样来保持宽高比。 – hsobhy

此滑块使用引导程序和一些媒体查询和工作为响应滑块。这是一个很好的功能。您将找到完整示例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% 
    } 
}

来源

2014-01-11 17:52:40 hsobhy

@hsoghy !!!!谢谢soooo muchhh！我改变了价值128线上的大小：D – user3076196

很高兴为你工作:) – hsobhy

您还没有关闭您的img标签。

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

应该是：

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

来源

2014-01-11 17:42:20

如何更改JavaScript滑块的大小

回答

相关问题