Carousel

Carousel provides the functionality of sequentially displaying and switching between slides with any type of elements

Examples#

Base#

Web Component
HTML Blueprint

<chi-carousel>
  <div class="-d--flex" slot="items">
    <div class="chi-carousel__item -p--1">
      <!-- Custom item 1 -->
    </div>
    <div class="chi-carousel__item -p--1">
      <!-- Custom item 2 -->
    </div>
    <div class="chi-carousel__item -p--1">
      <!-- Custom item 3 -->
    </div>
    <div class="chi-carousel__item -p--1">
      <!-- Custom item 4 -->
    </div>
    <div class="chi-carousel__item -p--1">
      <!-- Custom item 5 -->
    </div>
    <div class="chi-carousel__item -p--1">
      <!-- Custom item 6 -->
    </div>
    <div class="chi-carousel__item -p--1">
      <!-- Custom item 7 -->
    </div>
    <div class="chi-carousel__item -p--1">
      <!-- Custom item 8 -->
    </div>
  </div>
</chi-carousel>

Single element per view#

Use the attribute single to render single item per view.

Web Component
HTML Blueprint

<chi-carousel single>
  <div class="-d--flex" slot="items">
    <div class="chi-carousel__item -p--1">
      <!-- Custom item 1 -->
    </div>
    <div class="chi-carousel__item -p--1">
      <!-- Custom item 2 -->
    </div>
    <div class="chi-carousel__item -p--1">
      <!-- Custom item 3 -->
    </div>
    <div class="chi-carousel__item -p--1">
      <!-- Custom item 4 -->
    </div>
    <div class="chi-carousel__item -p--1">
      <!-- Custom item 5 -->
    </div>
    <div class="chi-carousel__item -p--1">
      <!-- Custom item 6 -->
    </div>
    <div class="chi-carousel__item -p--1">
      <!-- Custom item 7 -->
    </div>
    <div class="chi-carousel__item -p--1">
      <!-- Custom item 8 -->
    </div>
  </div>
</chi-carousel>

Dot controllers#

Use the attribute dots to render carousel with dot controller.

Web Component
HTML Blueprint

<chi-carousel dots>
  <div class="-d--flex" slot="items">
    <div class="chi-carousel__item -p--1">
      <!-- Custom item 1 -->
    </div>
    <div class="chi-carousel__item -p--1">
      <!-- Custom item 2 -->
    </div>
    <div class="chi-carousel__item -p--1">
      <!-- Custom item 3 -->
    </div>
    <div class="chi-carousel__item -p--1">
      <!-- Custom item 4 -->
    </div>
    <div class="chi-carousel__item -p--1">
      <!-- Custom item 5 -->
    </div>
    <div class="chi-carousel__item -p--1">
      <!-- Custom item 6 -->
    </div>
    <div class="chi-carousel__item -p--1">
      <!-- Custom item 7 -->
    </div>
    <div class="chi-carousel__item -p--1">
      <!-- Custom item 8 -->
    </div>
  </div>
</chi-carousel>

Pagination#

Use the attribute pagination to render carousel with pagination.

Web Component
HTML Blueprint

<chi-carousel pagination single>
  <div class="-d--flex" slot="items">
    <div class="chi-carousel__item -p--1">
      <!-- Custom item 1 -->
    </div>
    <div class="chi-carousel__item -p--1">
      <!-- Custom item 2 -->
    </div>
    <div class="chi-carousel__item -p--1">
      <!-- Custom item 3 -->
    </div>
    <div class="chi-carousel__item -p--1">
      <!-- Custom item 4 -->
    </div>
    <div class="chi-carousel__item -p--1">
      <!-- Custom item 5 -->
    </div>
    <div class="chi-carousel__item -p--1">
      <!-- Custom item 6 -->
    </div>
    <div class="chi-carousel__item -p--1">
      <!-- Custom item 7 -->
    </div>
    <div class="chi-carousel__item -p--1">
      <!-- Custom item 8 -->
    </div>
  </div>
</chi-carousel>

Custom controllers#

Use slot="previous" and slot="next" to provide custom controllers to carousel.

Web Component
HTML Blueprint

<chi-carousel single>
  <button class="examplePreviousButton" slot="previous">
    <i class="chi-icon icon-chevron-left -sm--2" aria-hidden="true"></i>
  </button>
  <button class="exampleNextButton" slot="next">
    <i class="chi-icon icon-chevron-right -sm--2" aria-hidden="true"></i>
  </button>
  <div class="chi-carousel__item" slot="items">View 1</div>
  <div class="chi-carousel__item" slot="items">View 2</div>
  <div class="chi-carousel__item" slot="items">View 3</div>
  <div class="chi-carousel__item" slot="items">View 4</div>
  <div class="chi-carousel__item" slot="items">View 5</div>
  <div class="chi-carousel__item" slot="items">View 6</div>
  <div class="chi-carousel__item" slot="items">View 7</div>
  <div class="chi-carousel__item" slot="items">View 8</div>
</chi-carousel>

<!-- Style custom controllers according to your design requirements -->
<style type="text/css">
  button.examplePreviousButton,
  button.exampleNextButton {
    align-items: center;
    background-color: transparent;
    border: none;
    display: flex;
    height: 100%;
    justify-content: center;
    opacity: 0.5;
    width: 100%;
  }

  button.examplePreviousButton:hover,
  button.exampleNextButton:hover {
    cursor: pointer;
    opacity: 1;
  }
</style>

Web Component#

Properties#

Property	Attribute	Description	Type	Default
`dots`	`dots`	To render Carousel with dot controllers	`boolean`	undefined
`pagination`	`pagination`	To render Carousel with pagination indicators	`boolean`	undefined
`single`	`single`	To render Carousel with a single item per view	`boolean`	undefined

Events#

Event	Description	Type
`chiViewChange`	Triggered when the user navigates to another view	`CustomEvent<number>`

Accessibility#

Accessibility guidelines coming soon