💡
【JS】splideのスライダーで真ん中のスライドだけ大きく表示
splideとは?
日本人が開発しているので公式ドキュメントが日本語で読みやすいです。
いろんなオプションもあって便利!
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