Incorrect slide sizing on load, using two carousels

Describe the problem I’m using two related carousels similar to https://codepen.io/lukaszflorczak/pen/yrQyBj

On load, the smaller/secondary carousel loads at a much larger size than expected, seemingly at the full container width instead of a width based on slide count.

I assume I’m missing a simple detail, but it is escaping me at present.

Code I attempted to get the gist of what I’m doing in my project here: https://codepen.io/justin-RB/pen/BaopNKW

I am not currently setting the height of the thumbnail slides, but upon adding the following, the problem persists.

.slide--thumbnail {
  height: 100px;
}

Expected behavior Slides to load at the appropriate size.

Screenshots

Additional context Can confirm the same result in Chrome, Safari, Firefox (at least on MacOS 10.15)

[lukaszflorczak]

Thank you very much for ☕️☕️☕️☕️☕️☕️ I really appreciate that 😊

[lukaszflorczak]

Right. In this case, if you reload agile (by method or key) you have to update asNavFor refs. So I propose something like that – the key to refresh carousels and asNavFor update in watcher: https://codepen.io/lukaszflorczak/pen/WNQRrbb?editors=0011