@ksmsk/svelte-carousel

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-carousel

Usage

<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`
itemToShow	1	`number	object`