最近現れましたスライド用のjsで、なんだか人気のようです。

splide
https://ja.splidejs.com/

特にsplide-extension-auto-scrollの、スルスルユルユルと自動で横にスクロールして動く動作がとても安定していて気持ちがいい。それが一番の特徴かな？
そのほかの機能も問題ないのでslickやswiperの代わりに出番が多くなっています。

今回のメモは、fadeでのスライド切り替えの時、普通に使うと、スライド内容の高さが「最大の高さ」のもの合わせになってしまいます。

各スライドの内容に合わせた高さにしたい。（slickは便利なオプションがあるんですよね）

自分だけかもしれないのですが、height: ‘auto’も、autoHeight: trueも、反応がなかったので困ってしまい。色々と試したのでメモとなります。

結論、cssで解決です。（fadeに関してだけ有効かも）

.splide__track--fade>.splide__list>.splide__slide {
	height: 0 !important;
}
.splide__track--fade>.splide__list>.splide__slide.is-active {
	height: auto !important;
}

.splide__slide の高さを 0 に設定し、 .is-active クラスを持つ .splide__slide の高さを auto に設定しています。それで、.splide__slide の高さがフェード切り替えの際に 0 から auto に変わり、スライド内容に合わせた高さになるという形になります。

ChatGPTにも聞いたんですがオプションを教えてもらったんですけども動かず、こんなことで1時間ほど消費してしまい。なんだろうなと。すぐに忘れそうなので。