Having an issue with the Slick carousel where images are not resizing based on browser size (original size is 300x228px).
Just to clarify: When I shrink the browser window, the number of slides decreases but the images remain the same size.
I've been attempting to resolve this problem without any luck so far. Here is the current code I am using.
$(document).on('ready', function () {
$(".slideslick").slick({
autoplay: true,
autoplaySpeed: 5000,
slidesToShow: 2,
arrows: false,
responsive: [
{
breakpoint: 880,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});
});.slideslick {
width: 100%;
margin: 0px auto;
}
.slide1 img {
position: relative;
margin-right: auto;
margin-left: auto
}
.slide2 img {
position: relative;
margin-right: auto;
margin-left: auto
}
.slide3 img {
position: relative;
margin-right: auto;
margin-left: auto
}
.slide4 img {
position: relative;
margin-right: auto;
margin-left: auto
}
.slide5 img {
position: relative;
margin-right: auto;
margin-left: auto;
}
.slick-slide{
width: 300px
}
.slick-slide img{
max-width: 100%;
height: auto;
min-width: 200px;
min-height: 150px;
}<div class="slideslick">
<div class="slidercontent1">
<div class="slide1">
<img draggable="false" src="assets/images/incomparablesdelamor.png">
</div>
</div>
<div class="slidercontent2">
<div class="slide2">
<img draggable="false" src="assets/images/sorayamantari.png">
</div>
</div>
<div class="slidercontent3">
<div class="slide3">
<img draggable="false" src="assets/images/nandodelmantaro.png">
</div>
</div>
<div class="slidercontent4">
<div class="slide4">
<img draggable="false" src="assets/images/nandodelmantaro.png">
</div>
</div>
<div class="slidercontent5">
<div class="slide5">
<img draggable="false" src="assets/images/nandodelmantaro.png">
</div>
</div>
</div>