Carousel

cc-carousel component by default displays 3 items per view.

<cc-carousel pagination navigation>
  <cc-carousel-item>
    <img src="/carousel/01.jpg" alt="carousel demo image 1">
  </cc-carousel-item>
  <cc-carousel-item>
    <img src="/carousel/02.jpg" alt="carousel demo image 2">
  </cc-carousel-item>
  <cc-carousel-item>
    <img src="/carousel/03.jpg" alt="carousel demo image 3">
  </cc-carousel-item>
  <cc-carousel-item>
    <img src="/carousel/04.jpg" alt="carousel demo image 4">
  </cc-carousel-item>
  <cc-carousel-item>
    <img src="/carousel/05.jpg" alt="carousel demo image 5">
  </cc-carousel-item>
  <cc-carousel-item>
    <img src="/carousel/06.jpg" alt="carousel demo image 6">
  </cc-carousel-item>
</cc-carousel>

Items Per View

Items per view can be controllbed by setting items-per-view attribute.

`items-per-view="2"`

<cc-carousel pagination navigation items-per-view="2">
  <cc-carousel-item>
    <img src="/carousel/01.jpg" alt="carousel demo image 1">
  </cc-carousel-item>
  <cc-carousel-item>
    <img src="/carousel/02.jpg" alt="carousel demo image 2">
  </cc-carousel-item>
  <cc-carousel-item>
    <img src="/carousel/03.jpg" alt="carousel demo image 3">
  </cc-carousel-item>
  <cc-carousel-item>
    <img src="/carousel/04.jpg" alt="carousel demo image 4">
  </cc-carousel-item>
  <cc-carousel-item>
    <img src="/carousel/05.jpg" alt="carousel demo image 5">
  </cc-carousel-item>
  <cc-carousel-item>
    <img src="/carousel/06.jpg" alt="carousel demo image 6">
  </cc-carousel-item>
</cc-carousel>

`items-per-view="1"`

<cc-carousel pagination navigation items-per-view="1">
  <cc-carousel-item>
    <img src="/carousel/01.jpg" alt="carousel demo image 1">
  </cc-carousel-item>
  <cc-carousel-item>
    <img src="/carousel/02.jpg" alt="carousel demo image 2">
  </cc-carousel-item>
  <cc-carousel-item>
    <img src="/carousel/03.jpg" alt="carousel demo image 3">
  </cc-carousel-item>
  <cc-carousel-item>
    <img src="/carousel/04.jpg" alt="carousel demo image 4">
  </cc-carousel-item>
  <cc-carousel-item>
    <img src="/carousel/05.jpg" alt="carousel demo image 5">
  </cc-carousel-item>
  <cc-carousel-item>
    <img src="/carousel/06.jpg" alt="carousel demo image 6">
  </cc-carousel-item>
</cc-carousel>

Pagination

Add pagination attribute to show pagination buttons.

<cc-carousel pagination>
  <cc-carousel-item>
    <img src="/carousel/01.jpg">
  </cc-carousel-item>
  <cc-carousel-item>
    <img src="/carousel/02.jpg">
  </cc-carousel-item>
  <cc-carousel-item>
    <img src="/carousel/03.jpg">
  </cc-carousel-item>
  <cc-carousel-item>
    <img src="/carousel/04.jpg">
  </cc-carousel-item>
  <cc-carousel-item>
    <img src="/carousel/05.jpg">
  </cc-carousel-item>
  <cc-carousel-item>
    <img src="/carousel/06.jpg">
  </cc-carousel-item>
</cc-carousel>

Previous & Next Buttons

Add navigation attribute to show previous & next navigation buttons.

<cc-carousel navigation>
  <cc-carousel-item>
    <img src="/carousel/01.jpg">
  </cc-carousel-item>
  <cc-carousel-item>
    <img src="/carousel/02.jpg">
  </cc-carousel-item>
  <cc-carousel-item>
    <img src="/carousel/03.jpg">
  </cc-carousel-item>
  <cc-carousel-item>
    <img src="/carousel/04.jpg">
  </cc-carousel-item>
  <cc-carousel-item>
    <img src="/carousel/05.jpg">
  </cc-carousel-item>
  <cc-carousel-item>
    <img src="/carousel/06.jpg">
  </cc-carousel-item>
</cc-carousel>

Aspect Ratio

Update component’s --aspect-ratio custom property to customize the image aspect ratio.

<cc-carousel navigation pagination style="--aspect-ratio: 3/2;">
  <cc-carousel-item>
    <img src="/carousel/01.jpg">
  </cc-carousel-item>
  <cc-carousel-item>
    <img src="/carousel/02.jpg">
  </cc-carousel-item>
  <cc-carousel-item>
    <img src="/carousel/03.jpg">
  </cc-carousel-item>
  <cc-carousel-item>
    <img src="/carousel/04.jpg">
  </cc-carousel-item>
  <cc-carousel-item>
    <img src="/carousel/05.jpg">
  </cc-carousel-item>
  <cc-carousel-item>
    <img src="/carousel/06.jpg">
  </cc-carousel-item>
</cc-carousel>

TODO

Vertical Scrolling
Looping
Autoplay
Scroll Hint