0.1.1 • Published 2 years ago
@ksmsk/svelte-carousel v0.1.1
Svelte Carousel
Super lightweight carousel component for svelte. The component uses new CSS snap feature. Native scrolling feel in mobile!
Installation
npm install -S @ksmsk/svelte-carouselUsage
<script>
import SvelteCarousel from '@ksmsk/svelte-carousel';
let items = [...]
</script>
<SvelteCarousel {items} let:item>
<-- Arrow Elements and Styling -->
<div slot="prevArrow">back</div>
<div slot="prevArrow">forward</div>
<-- Default slot from iterated items -->
<div>{item}</div>
</SvelteCarousel>Props
| prop | default | type | description |
|---|---|---|---|
| items | [] | array | items to show in carousel |
| breakpoints | {sm: 640, md: 768, lg: 1024, xl: 1280, xxl:1440} | object | breakpoints for various screen sizes |
| gap | 8 | number | object | space between items numeric value converts to rem (0.25rem * gap) |
| itemToShow | 1 | number | object | item count to be shown on screen |