@mark8t/core

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