Svelte Card Carousel

The ultimate carousel component for Svelte 3.

Demo

• Your Demo Link
• REPL

Installation

yarn add your-package-name

npm install your-package-name

pnpm install your-package-name

Import Component

<script>
  import Carousel from 'your-package-name';
  ...
</script>

SvelteKit Support

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

1. Install as a dev dependency.

pnpm install your-package-name -D

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

const config = {
  kit: {
    vite: {
      optimizeDeps: {
        include: ['dependency1', 'dependency2']
      }
    }
  }
}

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

Events

onCardClick

Triggered when a card is clicked.

<Carousel on:cardClick={handleCardClick} />

Methods

goToPage(index)

Navigate to a specific page by index.

carousel.goToPage(2);

Troubleshooting

If you encounter the "document is not defined" error while running Vitest, make sure to include jsdom to simulate a DOM environment.

Contributing

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

License

MIT