How can I make Slick Slider height responsive?
Question
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* 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:
/* 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; }
5 answers
solution1
1 2016-04-14 09:07:20
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
solution2
1 2017-08-04 01:28:14
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.
solution3
0 2015-10-15 20:21:32
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.
solution4
0 2018-02-02 02:11:42
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.
solution5
0 2019-05-12 04:06:12
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>
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.