【jQuery】transform:scale()を使用してスライダー（slick）をズームインしながら切り替える方法のデモページ

.slider li .img {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  transform-origin: center top;
  transform: scale(1);
  transition: 4s transform ease-out;
}

.slider li.s-01 .img { background-image: url("/img/a.jpg"); }
.slider li.s-02 .img { background-image: url("/img/b.jpg"); }
.slider li.s-03 .img { background-image: url("/img/c.jpg"); }

.slider li.slick-active .img {
  transform: scale(1.03);
}
  

$(function(){
  var $window = $(window);
  var $body = $('body');
  $('.slider').slick({
    fade: true,
    arrows: false,
    autoplay:true,
    autoplaySpeed:1500,
    pauseOnFocus: false,
    pauseOnHover: false
  });
    var $container = $(".slider");
    var $slider = $(".slider");
    var $slide = $(".slider li");
    function Resize(){
    var winW = $window.width();
    var winH = $window.height();
      $container.width(winW);
      $container.height(winH);
      $slide.width(winW);
      $slide.height(winH);
      $slider.width(winW);
      $slider.height(winH);
    }
    $window.on("resize",Resize);
    Resize();
});