olegpix
commented
4 months ago Summary
Carousel doesn't work when placed unter tab navigation.
Steps to Reproduce
- Open Demo
- Run
- Click trough the tab navigation
Demo Link
https://stackblitz.com/edit/withastro-astro-fzqgqu?file=src%2Fpages%2Findex.astro
Expected Behavior
No response
Actual Behavior
No response
Screenshots
No response
Hi, You need to recalculate the carousel width every time you change tab (check the full code in the demo)
<script type="module">
window.addEventListener('load', () => {
const tabs = HSTabs.getInstance("#tabs-01", true);
tabs.element.on('change', ({ current }) => {
const carousel = HSCarousel.getInstance(`${current} [data-hs-carousel]`, true);
carousel.element.recalculateWidth();
});
});
</script>
Summary
Carousel doesn't work when placed unter tab navigation.
Steps to Reproduce
Demo Link
https://stackblitz.com/edit/withastro-astro-fzqgqu?file=src%2Fpages%2Findex.astro
Expected Behavior
No response
Actual Behavior
No response
Screenshots
No response