I am making an image carousel using Slick. I want to fit the width of the image along screen and the height is scaled with the width. Below is my index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>slick test</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
</head>
<body>
<div class="carousel-container">
<div >
<img class="carousel" src="images/1.jpg">
</div>
<div >
<img class="carousel" src="images/2.jpg">
</div>
<div >
<img class="carousel" src="images/3.jpg">
</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//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" src="script.js"></script>
</body>
</html>
Below is my attempt in style.css:
.carousel-container {
margin: 0;
padding: 0;
max-width: 100%;
width: 100%;
}
carousel {
width: 100%;
height: auto;
}
The images seem to be printed at its original resolution.
How to make it right? Do I need to change anything in slick.css or something else?
>Solution :
I did not understand this line
the height is scaled with the width
Hope this is what you want.
.carousel-container {
margin: 0;
padding: 0;
max-width: 100%;
width: 100%;
}
.carousel {
width: 100vw;
height: auto;
}
.img-carousel{
width: 100%; height: 100%; object-fit: cover
}
body{
padding: 0;
margin: 0;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>slick test</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
</head>
<body>
<div class="carousel-container">
<div class="carousel" >
<img class="img-carousel" src="https://picsum.photos/600/300">
</div>
<div class="carousel">
<img class="img-carousel" src="https://picsum.photos/100/300">
</div>
<div class="carousel">
<img class="img-carousel" src="https://picsum.photos/200/100">
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
$('.carousel-container').slick({
arrows:false
});
</script>
</body>
</html>here to make the image fill entire scree I have made div to 100wv then added width: 100%; height: 100%; object-fit: cover to the img tag.
added few settings to slick
<script>
$('.carousel-container').slick({
arrows:false,
});
</script>
arrows:false, to hide arrows.