Carousel
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>Autoplay
Use the attribute autoplay to set the autoplay for the carousel and the attribute interval to set the interval for the autoplay.
1
2
3
4
5
6
7
8
<chi-carousel autoplay>
<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>Single with one item
1
<chi-carousel single>
<div class="-d--flex" slot="items">
<div class="chi-carousel__item -p--1">
<!-- Custom item 1 -->
</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>No Button Controllers
Use the attribute no-button-controllers to render Carousel without button controllers.
1
2
3
4
5
6
7
8
<chi-carousel no-button-controllers 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>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
Events
Accessibility
Accessibility guidelines coming soon