Aspect ratio with Slick Slider

by Faisal Khan Janjua

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<div class="slider">
<div class="banner-slider">
	<div class="slider_image" style="background-image: url(https://dummyimage.com/1007x334/ccc/F99.jpg&text=Image+1);"></div>
	<div class="slider_image" style="background-image: url(https://dummyimage.com/1007x334/ccc/9F9.jpg&text=Image+2);"></div>
	<div class="slider_image" style="background-image: url(https://dummyimage.com/1007x334/ccc/99F.jpg&text=Image+3);"></div>
	<div class="slider_image" style="background-image: url(https://dummyimage.com/1007x334/ccc/F9F.jpg&text=Image+4);"></div>
</div>
</div>

CSS

.slider .banner-slider .slick-slide{
  transform: scaleY(0.7);
  -webkit-transform: scaleY(0.7);
  transition: all ease-in-out .3s;
  -webkit-transition: all ease-in-out .3s;
}
.slider .banner-slider .slick-slide.slick-center{
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
  border-radius: 6px;
}
.slider .slider_image {
  outline: none;
  width:100%;
  height: 300px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position:center center;
}
/* .slider .banner-slider .slick-list{
  min-height:302px;
} */

JavaScript

function aspectRatio(){
  let widthT = $('.banner-slider').width()-100;
  let heighT = widthT * 334 / 1007; // height / width
  $('.slider_image').width(widthT).height(heighT);
  $('.banner-slider, .slick-track, .slick-list').height(heighT+10);
}
$(document).ready(function(){
  jQuery('.banner-slider').slick({
    speed: 1500,
    arrows: false,
    autoplay: false,
    infinite: true,
    slidesToShow: 1,
    centerMode: true,
    autoplaySpeed: 3000,
    adaptiveHeight: true,
  /*        responsive: [
              {
                  breakpoint: 992,
                  settings: {
                      infinite: true,
                      slidesToShow: 2,
                      slidesToScroll: 1,
                  }
              },
              {
                  breakpoint: 767,
                  settings: {
                      infinite: true,
                      slidesToShow: 3,
                      slidesToScroll: 1,
                  }
              },
              ] */
  });
	aspectRatio();
	$(".banner-slider").on("beforeChange", function (){
		aspectRatio();
  });
});
$(window).resize(function(){
  aspectRatio();
});