2つのFlickityをタブ切り替えで順に表示させるときに、後から表示させる方が要素取得できずにバグる

前提

タブの切り替えで2種類のスライダーをFlickityで実装しています。
最初に表示させておくスライダーは無事表示されるのですが、タブで切り替えた後に表示さえるスライダーが最初に高さが取得できておらず表示されませんでした。
直接ソースに高さ指定を行うことで、高さの取得はできたのですが、スライダー位置の調整（leftからの位置）が上手くできておらずバグります。

実現したいこと

タブ切り替えで2つ目のスライダーもバグらず1つ目と同じように表示させたい

該当のソースコード

html
1<div class="btns">
2 <div class="btn01 active">タブ01</div>
3<div class="btn02">タブ02</div>
4</div>
5
6<div class="slider01 selected">
7ここにスライダー01の内容が入ります。
8</div>
9<div class="slider02">
10ここにスライダー02の内容が入ります。
11</div>

試したこと

高さを取得できていないタグに対して直接height指定を行い、高さは取得できるようになった。

補足情報

現状、3枚スライドが流れるようにしているのですが、全てスライドの位置がleft:0となっており、重なった状態でスライドとしての意味をなしてません。

どなたかお分かりになられる方、アドバイスをいただけると幸いです。

追記

Flickityではないのですが、slick.jsでのバグ対応記事で、位置のリセットという方法？があるといったものを見つけました。
https://www.a-in-hello.world/tab_slick.html
こちら今回のバグと関係ありそうでしょうか。

Lhankor_Mhy

2022/07/13 03:28

Flickity とはこれのことですか？ https://flickity.metafizzy.co/

chibimame

2022/07/13 03:34

コメントありがとうございます！そうです！そしてすみません、たった今問題が解決しました。タブクリック時にresize()を行うことで解決しました。 https://flickity.metafizzy.co/api.html#resize 最初、こちらのreloadCellsを行なってみたのですが解決せず… https://flickity.metafizzy.co/api.html#resize reloadCellsが使えなかった理由がわからずモヤモヤしてますが、ひとまず上記質問の問題はresizeで解決できました。

Lhankor_Mhy

2022/07/13 03:36

ご解決されて何よりです。お手数ですが自己解決の処理をお願いします。 https://teratail.com/help#resolve-myself