Carousel

Carousels allow customers to horizontally swipe or click through content. They’re visually the same as a content slider, but built using css instead of js. We would recommend using the carousel over content slider to improve performance.

<tg-carousel>
    <tg-card class="four-cards-displayed"> your content </tg-card>
    <div class="single-card-displayed"> your content </div>
</tg-carousel>

.single-card-displayed { flex: 0 0 auto; } 

.four-cards-displayed { flex: 0 0 calc(25% - 3 / 4 * #{$tg-spacing-compact}); margin-right: $tg-spacing-compact }

Behaviour

• Carousel will extend to full-width of the screen between sm and ll breakpoints.
• Next and back controls are visible from the md breakpoint. Below md, the controls will become visible if a cursor is hovered over the content slider.
• Above the ll breakpoint, the next and back controls sit outside of the carousel page area. If your layout requires contained buttons at large breakpoints you can add the inset option.
• Scrolling can snap to the desired part of a carousel items by adding scroll-snap-align: and a position to the items.
• Add the attribute tgCarouselItem to each item in the carousel, this allows the buttons to accurately be disabled/enabled when items are added/removed from the carousel.
• Use flex to decide the width of your items. Remember to include any margin size.