CenturyLink Logo
CenturyLink
Lumen Logo
Lumen
Lumen Enterprise Portal Logo
Lumen Enterprise Portal

Carousel

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

Examples

Base

1
2
3
4
5
6
7
8
<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.

1
2
3
4
5
6
7
8
<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.

1
2
3
4
5
6
7
8
<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.

1
2
3
4
5
6
7
8
<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.

1
2
3
4
5
6
7
8
<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