Topic summary
A Flickity carousel implementation intermittently cuts off the bottom half of carousel cells on page load, though reloading typically fixes the issue.
Technical Setup:
- Uses Flickity.js with custom CSS styling
- Carousel displays product collections with images and titles
- Includes responsive design (40% width mobile, 20% desktop)
- JavaScript initializes carousel on DOMContentLoaded with options: draggable, no freeScroll, wrapAround, and groupCells at 100%
Key Implementation Details:
- Cells initially hidden with
visibility: hiddenandopacity: 0.5 - Page-loaded class added to cells after Flickity initialization to reveal them
- Custom styling for navigation dots and buttons
Current Status:
The original poster shared their store URL for troubleshooting. Community members requested the page link to investigate, with one helper indicating they checked the site and found it working properly, asking if the issue was already resolved. The discussion remains open pending confirmation from the original poster about whether the problem persists.