💡

【JS】splideのスライダーで真ん中のスライドだけ大きく表示

2024/06/10に公開

splideとは?

https://ja.splidejs.com/
アクセシビリティに配慮した軽量・高機能スライダー!
日本人が開発しているので公式ドキュメントが日本語で読みやすいです。
いろんなオプションもあって便利!

https://codepen.io/mdvlzqqm-the-lessful/pen/XWwgMBG

CSSの実装

transform: scale(.8);

でスライドを小さくします。

.splide__slide{
  &.is-active{
    .splide__content{
      transform: scale(1);
    }
  }
}

中央のスライド(アクティブなスライド。is-activeというclassが自動でつく)をtransform: scale(1)で標準の大きさにします。

JSの実装

updateOnMove: true,

このオプションを入れて、スライダーが動く前にclassを更新するようにします。
このオプションがないと動いた後にclassが更新されるので、スライドの変化のタイミングが遅くなります。

Discussion