How to align carousel items with 12 column grid?

What’s the best strategy for getting the slides in my carousel (6+ slides, each occupying 3 columns) to align with my underlying 12 column responsive grid?

  • Doesn’t need to work with CMS

  • Only needs to be aligned on page load (although snapping to the grid as users scrolls the carousel would be a bonus)

Thanks!

hi @BCSF IMO it is not possible to align it with underlying grid as slider items are not direct children of parent grid but rather slider wrapper(s). for the same reason is not possible use even a subgrid

Anyway, If you use lib like eg. Swiper you can set “slides per view” this can give you approx alignment. finally you can experiment with aligning for tablet and mobile.

hope this will point you right direction.

1 Like