Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/valexr/slidy

📸 Sliding action script
https://github.com/valexr/slidy

animations carousel easings javascript malinajs media-queries reactjs slider slideshow solidjs sveltejs typescript vuejs webcomponent

Last synced: about 23 hours ago
JSON representation

📸 Sliding action script

Host: GitHub
URL: https://github.com/valexr/slidy
Owner: Valexr
License: mit
Created: 2020-08-08T10:57:11.000Z (about 4 years ago)
Default Branch: main
Last Pushed: 2024-09-23T06:15:05.000Z (2 days ago)
Last Synced: 2024-09-23T11:19:45.533Z (2 days ago)
Topics: animations, carousel, easings, javascript, malinajs, media-queries, reactjs, slider, slideshow, solidjs, sveltejs, typescript, vuejs, webcomponent
Language: TypeScript
Homepage: https://slidy-core.surge.sh/
Size: 23.2 MB
Stars: 311
Watchers: 7
Forks: 13
Open Issues: 1
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

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

###  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.



```html

    import { slidy } from '@slidy/core'

    import { flip } from '@slidy/animation'

    slidy(node, { snap: 'deck', animation: flip })



    

    ...



```

## 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 © [Valexr](https://github.com/Valexr)