I have a working Slick Slider (/), 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:
<!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* e first in the head; any other head content must e *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=".11.3/jquery.min.js"></script>
<!--menu js-->
<script src="menu/script.js"></script>
<!-- slick-->
<script type="text/javascript" src=".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>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:
<!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* e first in the head; any other head content must e *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./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./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:
/* 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;
}- 1 adaptiveHeight: true? – max Commented Oct 15, 2015 at 20:08
- I'm not familiar with Slick, but do you actually want to override all those slick specific styles in your CSS? Messing with a library's CSS is tricky and it's quite possible you're inadvertently wreaking havoc on the adaptive height magic that Slick is supposed to take care of. Also, you want variable height right? NOT variable width? Is that correct? – Glen Selle Commented Oct 15, 2015 at 23:00
-
1
Within the Slick markup on the page there is a div with an explicit height which would prevent the image from scaling:
<div aria-live="polite" class="slick-list draggable" style="height: 745px;">If you remove this style and advance the slider it re-adds the explicit height – Glen Selle Commented Oct 15, 2015 at 23:08
5 Answers
Reset to default 6If 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.
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./kenwheeler/slick/issues/1024
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.
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:
.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 body and html, need to have height:100%; in their css styles.
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.
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>
});