Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chase-moskal/carouse
web component carousel ui
https://github.com/chase-moskal/carouse
carousel web-component
Last synced: 19 days ago
JSON representation
web component carousel ui
- Host: GitHub
- URL: https://github.com/chase-moskal/carouse
- Owner: chase-moskal
- License: isc
- Created: 2019-05-13T00:00:08.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-07-17T01:04:06.000Z (over 4 years ago)
- Last Synced: 2024-10-10T20:41:05.038Z (about 1 month ago)
- Topics: carousel, web-component
- Language: JavaScript
- Homepage: https://chasemoskal.com/carouse
- Size: 1.78 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 🍻 carouse 🚬
***web component carousel ui***
flip between images or other content, with arrow/dot buttons
live demos
- [gh-pages dev page chasemoskal.com/carouse](https://chasemoskal.com/carouse/)
- ["carouse demo" on codepen.io](https://codepen.io/ChaseMoskal/pen/QRGLxy?editors=1000)
## understanding the `` component
1. **put the carousel on your page**
```html
hello
hola
hallo
```
2. **know how to use the carousel**
``
- **optional boolean attributes**
- `[arrows]` – enable arrow controls
- `[dots]` – enable dot button controls
- `[loop]` – enable end-to-end looping
- `[hidden]` – hide the component until it has loaded
- **how does the carousel work?**
- you give it html elements as children, and the carousel treats them like slides
- then the carousel sets the `[hidden]` attribute on all but the "active slide"
- **programmatically control the carousel**
- `carousel.forward()`, onto the next slide
- `carousel.backward()`, back to the previous slide
- `carousel.jump(0)`, jump directly to the first slide
- `carousel.childElementCount`, getter for the number of children
3. **style the carousel and its children**
```html
@import url("https://unpkg.com/[email protected]/dist/carouse.css");
carouse-carousel {
max-width: 300px;
/* carouse custom css properties */
--focus-outline: 2px solid #0ef;
--carouse-slate-bg: rgba(255,255,255, 0.1);
--carouse-arrow-size: 4em;
--carouse-arrow-bg: rgba(60,60,60, 0.8);
--carouse-dotbar-bg: rgba(0,0,0, 0.3);
--carouse-dot-size: 0.8em;
--carouse-dot-bg: white;
}
```
- you'll probably want to import `carouse.css` because it has some preset styles for `figure` and `figcaption` elements
- every available `--carouse-` custom property is shown with its default value
- you'll probably want to set a `max-width` rule on the carousel
- the carousel assumes you are setting a app-level `* { margin: 0; padding: 0; box-sizing: border-box; }`, and if you don't, it might look wacky
## okay, so that's how i use it.. how do i install it?
- include the following snippet on your page
```html
{
"imports": {
"lit-html/": "https://unpkg.com/[email protected]/",
"lit-html": "https://unpkg.com/[email protected]/lit-html.js",
"lit-element/": "https://unpkg.com/[email protected]/",
"lit-element": "https://unpkg.com/[email protected]/lit-element.js",
"carouse/": "https://unpkg.com/[email protected]/",
"carouse": "https://unpkg.com/[email protected]/dist/register-all.js"
}
}
import "carouse/dist/register-all.js"
```
here's what's going on in this snippet
- **import maps**
- in the above snippet, we provide an import map which locates `carouse` and its dependencies
- of course, for the import map, we're using guy bedford's awesome polyfill: [es-module-shims](https://github.com/guybedford/es-module-shims)
- if you're from the future, you won't need the `-shim`'s
- **register the carouse component**
- we run `import "carouse/dist/register-all.js"` to register the `` component
## contributions are welcome
please open issues and launch pull requests, let's talk about it