【jQuery】Slickスライダーで拡大しながら切り替わるスライダーの作り方

RELEASE / 2022.6.4 UPDATE / 2022.06.06

この記事の目次を表示

1 【jQuery】Slickスライダーで拡大しながら切り替わるスライダーの作り方
- 1.1 実装例
- 1.2 コード解説

【jQuery】Slickスライダーで拡大しながら切り替わるスライダーの作り方

実装例

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

コード解説

HTML

<ul class="slider">
  <li><img src="https://irodori-design-web.com/blog_image/526/1.jpg" class=""></li>
  <li><img src="https://irodori-design-web.com/blog_image/526/2.jpg" class=""></li>
  <li><img src="https://irodori-design-web.com/blog_image/526/3.jpg" class=""></li>
</ul>

slickスライダー用のhtmlコードを用意します。ここまでは特に特殊な事は行っていません。

CSS

.slider{
  width: 100%;
}
.slider li{
  width: 100%;
}
.slider li img{
  width: 100%;
  height: 100vh;
  object-fit: cover;
  transform: scale(1);
  transition: 6.5s ease-out;
}
.slider li.zoom_animation img{
  transform: scale(1.1);
}

.slider li imgに対して、transition: scale(1);とtransition: 6.5s ease-out;を指定します。
デフォルトのサイズは1倍（等倍）、6.5秒かけてアニメーションが動くように指定します。

次に.slider li.zoom_animation imgに対して、transform: scale(1.1);を指定します。
class="zoom_animation"を親要素に持つimgタグはスケールサイズ1.1倍になるようにします。
この1.1倍になる速度は先ほど指定した6.5秒になります。6.5秒かけて1.1倍のサイズに拡大されます。

htmlのソースコードにある通り、liタグにはclass="zoom_animation"は指定してありません。
jQueryを使い、このクラスを追加したり、削除したりして拡大アニメーションを実装します。

JavaScript

$(window).on('load',function(){
  
  // slickスライダー生成
  $(".slider").slick({
    'autoplay': true,
    'arrows': false,
    'fade': true,
    'infinite': true,
    'autoplaySpeed': 3200,
    'pauseOnFocus': false,
    'pauseOnHover': false
  });
  
  // 一枚目の画像にanimation用クラスを付与
  $('.slider .slick-slide').eq(0).addClass("zoom_animation");
  
  // 画像切替え前に次表示される画像にanimation用クラスを付与
  $('.slider').on('beforeChange',function(slick,currentSlide,nextSlide){
    len = $(".slider .slick-slide").length;
    if( nextSlide == len-1 ){
      $(".slider .slick-slide").eq(0).addClass("zoom_animation");
    }else{
      $(".slider .slick-slide").eq(nextSlide+1).addClass("zoom_animation");
    }
  });
  
  // 画像切替え後にひとつ前に表示されていた画像のanimation用クラスを削除
  $('.slider').on('afterChange',function(slick,currentSlide){
    len = $(".slider .slick-slide").length;
    if( currentSlide['currentSlide'] == 0 ){
      $(".slider .slick-slide").eq(len-1).removeClass("zoom_animation");
    }else{
      $(".slider .slick-slide").eq(currentSlide['currentSlide']-1).removeClass("zoom_animation");
    }
  });
});