Svelte Card Carousel

The ultimate card carousel component for Svelte 4.

Demo

REPL

Installation

yarn add svelte-card-carousel

npm i svelte-card-carousel

pnpm i svelte-card-carousel

Import Component

<script>
  import Carousel from 'svelte-card-carousel';
  ...
</script>

Usage

<Carousel
  data={data}
  autoScroll={true}
  autoScrollSpeed={3000}
  dragAcceleration={1.5}
  wrapLeft={true}
  wrapRight={true}
/>

Data

{
	"cards": [
		{
			"imageSrc": "https://source.unsplash.com/featured/?landscape",
			"videoSrc": "https://www.shutterstock.com/shutterstock/videos/1052743418/preview/stock-footage--aerial-drone-distant-sunset-view-of-tour-eiffel-tower-and-seine-river-bridge-traffic-cars-driving.webm",
			"title": "Stunning Random, Landscape",
			"label": "Nature",
			"paragraph": "This is a beautiful landscape. The rolling hills stretch out as far as the eye can see. The sky above is a brilliant blue, dotted with fluffy clouds.",
			"buttonText": "Learn More",
			"buttonLink": "https://google.ca/"
		}
  ]
}

SvelteKit Support

If you're using SvelteKit, follow these additional steps:

Install as a dev dependency.

pnpm i svelte-card-carousel -D

Extend kit in svelte.config.js to include the vite property.

const config = {
  kit: {
    vite: {
      optimizeDeps: {
        include: ['svelte-card-carousel']
      }
    }
  }
}

Props

Prop	Type	Default	Description
`data`	`array`	`[]`	An array of card data objects.
`autoScroll`	`boolean`	`false`	Enable/disable auto-scrolling.
`autoScrollSpeed`	`number`	`3000`	Speed of auto-scrolling in ms.
`dragAcceleration`	`number`	`1.5`	Acceleration factor for drag.
`wrapLeft`	`boolean`	`true`	Enable/disable wrap to last item.
`wrapRight`	`boolean`	`true`	Enable/disable wrap to first item.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT

ryanspice/svelte-card-carousel