Javascript 如何使 Slick Slider 高度响应？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33157567/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make Slick Slider height responsive?
提问by Bailey
I have a working Slick Slider (http://kenwheeler.github.io/slick/), but can not get the height to be responsive. The images always stay the same height, no matter what size I shrink the browser to. I thought the "mobileFirst" setting would solve this but it doesn't seem to. Does anyone know how to make the slider and images inside it be responsive? Here's my code:
我有一个工作的 Slick Slider ( http://kenwheeler.github.io/slick/)，但无法获得响应的高度。无论我将浏览器缩小到什么尺寸，图像始终保持相同的高度。我认为“mobileFirst”设置可以解决这个问题，但似乎没有。有谁知道如何使滑块和其中的图像具有响应性？这是我的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bailey Miller</title>
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<style>
body{
background:black;
}
</style>
</head>
<body>
<div class="variable-width">
<div><img src="img/wedding/7.jpg"/></div>
<div><img src="img/wedding/8.jpg"/></div>
<div><img src="img/wedding/9.jpg"/></div>
<div><img src="img/wedding/10.jpg"/></div>
<div><img src="img/wedding/12.jpg"/></div>
<div><img src="img/wedding/13.jpg"/></div>
<div><img src="img/wedding/22.jpg"/></div>
<div><img src="img/wedding/23.jpg"/></div>
<div><img src="img/wedding/24.jpg"/></div>
<div><img src="img/wedding/25.jpg"/></div>
<div><img src="img/wedding/28.jpg"/></div>
<div><img src="img/wedding/29.jpg"/></div>
<div><img src="img/wedding/30.jpg"/></div>
</div>
<!-- jQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!--menu js-->
<script src="menu/script.js"></script>
<!-- slick-->
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.variable-width').slick({
mobileFirst: true,
infinite: true,
speed: 300,
slidesToShow: 1,
centerMode: false,
variableWidth: true,
focusOnSelect: true
});
});
</script>
</body>
</html>And my CSS:
还有我的 CSS：
/* Slider */
.slick-slider
{
position: relative;
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0 20px;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track
{
position: relative;
top: 0;
left: 0;
display: block;
}
.slick-track:before,
.slick-track:after
{
display: table;
content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-slide
{
display: none;
float: left;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}回答by lurkit
If you know the width and height of your images, calculate the aspect ratio of your image(s) and create a variable:
如果您知道图像的宽度和高度，请计算图像的纵横比并创建一个变量：
$aspectRatio: width / height;
Then you can use this simple solution:
然后你可以使用这个简单的解决方案：
.slick-slider{ max-width: calc(100vh * #{$aspectRatio});}
This makes the slider width change depending on the viewport height, and the slider height will change proportionally. Just change the value(s) as needed.
这使得滑块宽度根据视口高度而变化，并且滑块高度将按比例变化。只需根据需要更改值。
回答by webpod
I had the same issue - removing variable width resolved the issue and the content scaled to the browser window. Through the responsive option you can have different options for the plugin for different breakpoints. So you could keep the variable width for larger screens and change accordingly when it needs to be responsive.
我遇到了同样的问题 - 删除可变宽度解决了问题，内容缩放到浏览器窗口。通过响应选项，您可以为不同断点的插件设置不同的选项。因此，您可以为较大的屏幕保留可变宽度，并在需要响应时进行相应更改。
$(document).ready(function(){
$('.variable-width').slick({
mobileFirst: true,
infinite: true,
speed: 300,
slidesToShow: 1,
centerMode: false,
variableWidth: false,
focusOnSelect: true,
responsive: [
{
breakpoint: 1024,
settings: {
mobileFirst: true,
infinite: true,
speed: 300,
slidesToShow: 1,
centerMode: false,
variableWidth: true,
focusOnSelect: true
}
}
]
});
});
I found the following page on the issue: https://github.com/kenwheeler/slick/issues/1024
我在这个问题上找到了以下页面：https: //github.com/kenwheeler/slick/issues/1024
回答by user1633371
I used
我用了
.slick-slide img{max-width: 60vw;}
Adjust the max width to find a good balance for your particular project.
调整最大宽度以找到适合您特定项目的良好平衡。
Use in conjunction with Slick's responsive breakpoints for better results.
与 Slick 的响应断点结合使用以获得更好的结果。
回答by Tang Jung Kui
Try these codes
试试这些代码
$('.mySlides').slick({<br>
autoplay:true,<br>
dots: true,<br>
infinite: true,<br>
speed: 300,<br>
slidesToShow: 1,<br>
responsive: [{breakpoint:1024},{breakpoint:600}]<br>
});<br><br>
$('.mySlides').on('breakpoint', function(event, slick, breakpoint){<br>
$('.slick-slide').css('height',$('.slick-current img').height());<br>
});
回答by iain
I'm not quite sure how Slick Slider does it's markup, but I had to add another function to force the browser to redraw the image on window resize, when I used a similar js plugin.
我不太确定 Slick Slider 是如何进行标记的，但是当我使用类似的 js 插件时，我不得不添加另一个函数来强制浏览器在调整窗口大小时重新绘制图像。
Here's the funtion I used:
这是我使用的功能：
var debounceTimeout;
$(window).on("resize", function(){
clearTimeout(debounceTimeout);
debounceTimeout = setTimeout(function(){
$(".ps-current img:visible").css("max-height","99.9%");
setTimeout(function(){
$(".ps-current img:visible").removeAttr("style");
}, 10)
}, 300);
});
The CSS for the image is just:
图像的 CSS 只是：
.slider img {
max-width: 100%;
max-height: 100%;
}
Keep in mind that to give an element a relative height ( a height in percentages ), it's parent element must have a defined height.
请记住，要为元素提供相对高度（以百分比表示的高度），其父元素必须具有定义的高度。
To have an element take up 100% of the browser, that element and all of it's parents, up to bodyand html, need to have height:100%;in their css styles.
要让一个元素占据浏览器的 100% 空间，该元素及其所有父元素（直到body和html）都需要height:100%;在其 css 样式中使用。
