The CC Product Carousel component displays products from several categories or specific SKUs in a carousel format.
Magesuite standard
The carousel consists of:
Scrollable list with tiles. The list has a native scroll and can be swiped on touch devices.
Pagination - pagination displays the number of groups (the group consists of tiles that are visible on one screen). Pagination is not clickable and is purely informative. Pagination is displayed as a number (in the format 1/10) when there are more than 10 items. This setting can be configured for every project.
Navigation - (prev button and next button). It scrolls the carousel to the next group. By default navigation buttons are not shown on mobile but can be enabled there. The inactive button can be greyed out, can have opacity, or can be fully hidden. The carousel does not apply a loop.
Magesuite scenarios
Show part of the next tile on mobile
The common pattern is to show part of the next tile on mobile. The goal is to inform the user, that there are more tiles in the carousel and the list can be scrolled.
Dev hint: set $products-carousel_next-slide-visible variable in products-carousel.scss file
Use the whole screen on desktop
A carousel can use the whole available screen. This setting must be applied globally, for all carousels in a given project.
