Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zachleat/carouscroll
Add next/previous buttons to a horizontal scrollable container.
https://github.com/zachleat/carouscroll
Last synced: about 2 months ago
JSON representation
Add next/previous buttons to a horizontal scrollable container.
- Host: GitHub
- URL: https://github.com/zachleat/carouscroll
- Owner: zachleat
- License: mit
- Created: 2024-01-31T14:03:16.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-02-07T21:21:29.000Z (8 months ago)
- Last Synced: 2024-07-26T06:22:54.092Z (about 2 months ago)
- Language: HTML
- Homepage: https://zachleat.github.io/carouscroll/demo.html
- Size: 49.8 KB
- Stars: 113
- Watchers: 3
- Forks: 6
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# carouscroll
A web component to add next/previous buttons to a horizontal scrollable container.
* [Demos](https://zachleat.github.io/carouscroll/demo.html)
## Features
* Interaction compatible with scroll or touch.
* No layout shift. Make sure you include the CSS snippet!
* (Optional) Smooth scrolling with `scroll-behavior: smooth`.
* (Optional) `loop` attribute to enable looping around from start/end.
* (Optional) Next/Previous buttons can be placed anywhere in the document.
* (Optional) `` element can accessibly announce the current slide number (out of total number of slides).
## Installation
You can install via `npm` ([`@zachleat/carouscroll`](https://www.npmjs.com/package/@zachleat/carouscroll)) or download the `carouscroll.js` JavaScript file manually.
```shell
npm install @zachleat/carouscroll --save
```
Add `carouscroll.js` to your site’s JavaScript assets.
## Usage
First you need to add some critical CSS to your page. These styles are **crucial** to reduce Layout Shift (CLS), set the aspect ratio of the slides, and to avoid loading `loading="lazy"` images on off-screen slides.
```css
carou-scroll {
display: flex;
overflow-x: scroll;
overflow-y: hidden;
}
carou-scroll > * {
min-width: 100%;
aspect-ratio: 16/9;
}
```
Next, add the HTML:
```html
```
That’s it!
### Add buttons (optional)
For maximum flexibility, these buttons can be placed anywhere in the document and are tied by an `id` back to the parent scroller.
Make sure you think about the before/after JavaScript experience here. This component will remove `disabled` for you but you can add additional styling via your own CSS: `carou-scroll:defined {}`.
```html
Previous
Next
```
### Add output (optional)
This will update (and accessibly announce) a current status element with e.g. `Slide 1 of 10` text.
For maximum flexibility, this element can be placed anywhere in the document and is tied by an `id` back to the parent scroller.
```html
```
### Make it loop around (optional)
Add the `loop` attribute.
```html
```
### Smooth scrolling CSS (optional)
```css
carou-scroll {
scroll-behavior: smooth;
}
```
### Add your own scroll snap CSS (optional)
```css
carou-scroll {
scroll-snap-type: x mandatory;
}
carou-scroll > * {
scroll-snap-align: center;
}
```