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:

1. Install as a dev dependency.

   pnpm i svelte-card-carousel -D
   

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

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

Props

Contributing

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

License

MIT