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

※デベロッパーツール等でソースコードをご確認ください(Please check using Developer tools)

マイナビAGENT

スポンサーリンク

マイナビAGENT

CSS

.slider img {
  transform-origin: center top;
  transform: scale(1.1);
  transition: 5s ease-out;
}
.slider .slick-active img {
  transform: scale(1.0);
}
  

JavaScript

$(function(){
  $('.slider').slick({
    fade: true,
    arrows: false,
    autoplay:true,
    autoplaySpeed:1500,
    pauseOnFocus: false,
    pauseOnHover: false
  });
});