u1ui / carousel.el

Simple carousel component

<u1-carousel> - element

Simple carousel component

Features

• css only fallback
• no unnecessary css, style it yourself!
• keyboard navigation
• play / stop
• stops playing if focus is inside
• slide on focus (eg. inputs inside)
• 3 Modes (slide, scroll, fade)
• light-weight

Usage

<u1-carousel autoplay controls>
    <div>Item 1</div>
    <div>Item 2</div>
</u1-carousel>

u1-carousel {
    background:var(--color-light);
}
u1-carousel > :not([slot]) {
    padding:3rem;
    text-align:center;
}

Install

<link href="https://cdn.jsdelivr.net/gh/u1ui/carousel.el@x.x.x/carousel.min.css" rel=stylesheet>
<script src="https://cdn.jsdelivr.net/gh/u1ui/carousel.el@x.x.x/carousel.min.js" type=module></script>

Demos

experiments.html
minimal.html
nested.html
test.html

About

• MIT License, Copyright (c) 2022 (like all repositories in this organization)
  
• Suggestions, ideas, finding bugs and making pull requests make us very happy. ♥