# @slidy/element

> Simple, configurable & reusable carousel CustomElement

Latest version **1.2.3** (published 2024-11-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install @slidy/element
pnpm add @slidy/element
yarn add @slidy/element
bun add @slidy/element
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 1.2.3 |
| Published | 2024-11-19 |
| First published | 2022-08-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 57.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 357 |
| Author | Valexr |
| Maintainers | valexr |
| Keywords | Slidy, Slider, Carousel, Action, Script, Js, Ts |

## Links

- npm: https://www.npmjs.com/package/@slidy/element
- Repository: https://github.com/Valexr/slidy
- Homepage: https://github.com/Valexr/Slidy/tree/master/packages/element
- Issues: https://github.com/Valexr/slidy/issues
- npm.io page: https://npm.io/package/@slidy/element

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 1.2.3 (latest) — 2024-11-19
- 1.2.2 — 2023-01-29
- 1.2.1 — 2023-01-10
- 1.2.0 — 2022-10-10
- 1.1.0 — 2022-09-10
- 1.0.0 — 2022-08-29

## README

[![npm version](https://img.shields.io/npm/v/@slidy/core)](https://www.npmjs.com/package/@slidy/core)
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@slidy/core?label=minzip)](https://bundlephobia.com/package/@slidy/core)
[![npm downloads](https://img.shields.io/npm/dt/@slidy/core)](https://www.npmjs.com/package/@slidy/core)
[![github issues](https://img.shields.io/github/issues/valexr/slidy)](https://github.com/Valexr/slidy/issues)
[![npm license](https://img.shields.io/npm/l/@slidy/core)](https://www.npmjs.com/package/@slidy/core)

# @Slidy

### <img align="right" width="120" src="assets/static/Slidy.png"> Simple, configurable, nested & reusable sliding action script with templates, animations, easings & plugins.

Сompletely mimics the behavior of a native scroll with mouse drag, index navigation, acceleration, gravity & infinite loop mode.

<img src="assets/static/flip.gif">

```html
<script>
    import { slidy } from '@slidy/core'
    import { flip } from '@slidy/animation'

    slidy(node, { snap: 'deck', animation: flip })
</script>

<div id="node">
    <img />
    ...
</div>
```

## Try the [DEMO](https://slidy-core.surge.sh/)

## [Packages](https://github.com/Valexr/slidy/tree/master/packages)

-   [@slidy/core](https://github.com/Valexr/slidy/tree/master/packages/core) - Core sliding script
-   [@slidy/media](https://github.com/Valexr/slidy/tree/master/packages/media) - Observable media
-   [@slidy/easing](https://github.com/Valexr/slidy/tree/master/packages/easing) - Easing functions
-   [@slidy/animation](https://github.com/Valexr/slidy/tree/master/packages/animation) - Animation functions
-   [@slidy/plugins](https://github.com/Valexr/slidy/tree/master/packages/plugins) - Plugins functions
-   [@slidy/element](https://github.com/Valexr/slidy/tree/master/packages/element) - CustomElement
-   [@slidy/svelte](https://github.com/Valexr/slidy/tree/master/packages/svelte) - SvelteJS template
-   [@slidy/solid](https://github.com/Valexr/slidy/tree/master/packages/solid) - SolidJS template
-   [@slidy/react](https://github.com/Valexr/slidy/tree/master/packages/react) - ReactJS template

### 👨🏻‍💻 in progress...

-   [Demo docs site](https://github.com/Valexr/slidy/tree/master/www) based on SvelteKit

### 📝 todo...

-   [@slidy/vue](https://github.com/Valexr/slidy/tree/master/packages/vue) - VueJS template
-   [@slidy/malina](https://github.com/Valexr/slidy/tree/master/packages/malina) - MalinaJS template

## NPM organization [@slidy](https://www.npmjs.com/org/slidy)

## Development

-   `esbuild` - bundling & packaging
-   `pnpm workspaces` - monorepo
-   `tsc` - types declaration
-   `derver` - dev server

## Thanks 🎉

[@ariya](https://github.com/ariya) for [kinetic](https://github.com/ariya/kinetic) - examples & explanations of scroll kinetic principles  
[@argyleink](https://github.com/argyleink) for [open-props](https://github.com/argyleink/open-props) - Open Source CSS Variables  
[@evanw](https://github.com/evanw) for [esbuild](https://github.com/evanw/esbuild) - an extremely fast JS bundler  
[Unsplash](https://github.com/unsplash) for [light dataset](https://github.com/unsplash/datasets) - Unsplash images made available for research and machine learning by this [terms](https://github.com/unsplash/datasets/blob/master/TERMS.md)  
[@AlexxNB](https://github.com/AlexxNB) for [derver](https://github.com/AlexxNB/derver) - simple but powerfull dev/prod nodejs server  
[@PaulMaly](https://github.com/PaulMaly) for idea of simplifing reactive updates of options object  
[@rodshtein](https://github.com/rodshtein) for the idea of implementing the action function  
[@EricRovell](https://github.com/EricRovell) for collaboration, ideas of modulating `@Slidy` & `SvelteJS` root template  
[@ArtemiySchukin](https://github.com/yhdgms1) for collaboration & `SolidJS` & `RactJS` implementations

MIT &copy; [Valexr](https://github.com/Valexr)

---
_Source: https://npm.io/package/@slidy/element · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._