Carousel

Carousel component wraps the contented blocks into slides and displays it with a navigation. It can contain any type of component such as Image, Text, etc.

Default style Carousel navigation floats on top of the content so it works perfectly only with Image, while Floating Carousel places navigation below the content.

Each Carousel can be infinitely rotating or not based on infinite property.

Pseudo-code:

<carousel style="floating">
  <carousel-content>
    <carousel-item>
      <title/>
      <spacer/>
      <body/>
    </carousel-item>
    <carousel-item>
      <image/>
      <spacer/>
      <body/>
    </carousel-item>
  <carousel-content/>
  <carousel-navigation/>
</carousel>

Styles

Floating

Floating Carousel component is used when the carousel has an image and additional content below it which have to slide together. In this case, navigational dots are always placed below the content. Navigation arrows are displayed only on the web platform and can have two positions: outside and inside the carousel.

Full-Width

Full-Width style Carousel places all content items in the line and allows navigation between them using scroll. You should be able to pass any size of images or text, however, it shouldn’t be the 100% container width.

Specifications

// Base
$carousel-navigation-position               : unit(4);
$carousel-navigation-alignment              : center;

$carousel-background-color                  : palette(cg1);
$carousel-bullet-size                       : unit(2);
$carousel-bullet-margin                     : unit(1);
$carousel-bullet-border-radius              : radius(round);
$carousel-bullet-color                      : rgba(palette(cg9), 0.48);
$carousel-bullet-active-color               : palette(cg9);

// Styles

$carousel-floating-background-color         : transparent;
$carousel-floating-bullet-color             : rgba(palette(cg1), 0.12);
$carousel-floating-bullet-active-color      : palette(cp1);
$carousel-floating-navigation-padding       : unit(4);

$carousel-full-width-items-padding          : unit(2);
$carousel-full-width-background-color       : transparent;
$carousel-full-width-navigation-hidden      : true;

$carousel-control-vertical-position-outside   : unit(12);
$carousel-control-vertical-position-inside    : unit(4);

API

name type default
style default / floating / full-width default
infinite true / false false
arrows inside / outside inside