<div class="main">
<div class="one-time">
<div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Monasterio_Khor_Virap%2C_Armenia%2C_2016-10-01%2C_DD_25.jpg/1200px-Monasterio_Khor_Virap%2C_Armenia%2C_2016-10-01%2C_DD_25.jpg" data-cover="1"></div>
<div><img src="https://www.atlasandboots.com/wp-content/uploads/2019/05/ama-dablam2-most-beautiful-mountains-in-the-world.jpg" data-cover="2"></div>
<div><img src="https://i.pinimg.com/originals/b8/9a/84/b89a84d316e74a3402ec1c8e7545f1bd.jpg" data-cover="3"></div>
</div>
</div>
<div id="results"></div>
.main {
padding: 30px;
}
.slick-prev:before, .slick-next:before {
font-size: 30px;
line-height: 1;
opacity: .75;
color: black;
font-smoothing: antialiased;
osx-font-smoothing: grayscale;
}
.slick-prev:before {
content: '←';
}
.slick-next:before {
content: '→';
}
.slick-prev, .slick-next {
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
display: block;
width: 20px;
height: 20px;
padding: 0;
transform: translate(0, -50%);
transform: translate(0, -50%);
transform: translate(0, -50%);
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: transparent;
}
.slick-next {
right: -25px;
}
.slick-prev {
left: -30px;
}
.slick-track .slick-slide {
display: block;
height: 100%;
width: 100vw;
}
$('.one-time').slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 1,
adaptiveHeight: true
});
$('img[data-cover]').each(function(){
var rParentHeight = $(this).parent().height();
$(rParentHeight).each(function(){
$('#results').append(rParentHeight + '<br />');
});
});
This Pen doesn't use any external CSS resources.