https://github.com/zgunz42/svelte-slideit

glidejs.com port for awesome svelte
https://github.com/zgunz42/svelte-slideit

glidejs svelte svelte-component svelte-components sveltejs

Last synced: 25 days ago
JSON representation

glidejs.com port for awesome svelte

• Host: GitHub
• URL: https://github.com/zgunz42/svelte-slideit
• Owner: zgunz42
• License: mit
• Created: 2020-05-15T01:13:12.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-04-30T07:59:31.000Z (6 months ago)
• Last Synced: 2024-05-01T16:47:42.333Z (6 months ago)
• Topics: glidejs, svelte, svelte-component, svelte-components, sveltejs
• Language: Svelte
• Size: 40 KB
• Stars: 7
• Watchers: 2
• Forks: 3
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
## Svelte SlideIt

![npm-publish](https://github.com/zgunz42/svelte-slideit/workflows/npm-publish/badge.svg) [![svelte-v2](https://img.shields.io/badge/svelte-v2-orange.svg)](https://v2.svelte.dev) [![svelte-v3](https://img.shields.io/badge/svelte-v3-blueviolet.svg)](https://svelte.dev)

### Hello SlideIt

SlideIt is a slider and carousel build on top of [Glidejs](https://glidejs.com/). I build this because other

svelte component like *[svelte-carousel](https://github.com/beyonk-adventures/svelte-carousel/blob/master/README.md)* 

did not support responsive because can't handle it [Siema](https://github.com/pawelgrzybek/siema). Other reason i need

carousel API like owlcarousel but use vanilla js for less depedency.

Core feature:

- [x] Responsive config options

- [x] Port all glidejs event to svelte custom event

- [x] Many slot that can you fill with "any html tag"

- [x] Glidejs css imported in style tag thank to **svelte-preprocess**

## Event Name

All event name from Glidejs has been rename `a.b` into `aB`, so if want to listen

into some event like this.

```sveltehtml

``` 

It will listen into `mount.before` of Glidejs event name

## Render Carousel Item

```sveltehtml

    


        
{item}

    


```

## Render Control and Bullet

_TODO_

## Same Config as Glide js

See glidejs documentation https://glidejs.com/docs/options/