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>
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>