svelte-carousel

Note: This project is now archived as the developers no longer use carousels and recommend against their use based on various articles highlighting usability and performance issues.

Library Overview

• Purpose: A lightweight Svelte-based carousel/slider component, rewritten from scratch using Svelte v3 and inspired by Siema for minimal footprint.
• Target Audience: Developers needing a simple, framework-agnostic carousel (with Svelte support).
• Framework Support: Primarily designed for Svelte but works with any framework (pure JavaScript).

Key Features

• Customizable Controls: Supports custom left/right controls via slots (e.g., using icons from svelte-feather-icons).
• Responsive Design: Adjusts slides per page via breakpoints (e.g., perPage={{ 800: 3, 500: 2 }}).
• Interactive Options:
  • Loop, autoplay, draggable slides, and touch/swipe support.
  • Configurable transition duration, easing, and RTL (right-to-left) layout.
• Events: Emits a change event with current slide index and total slide count.
• Programmatic Control: Exposes methods like left(), right(), go(), pause(), and resume() for manual slide navigation.

Example Use Case

<Carousel autoplay={3000} dots={false}>
  <CustomIcon slot="left-control" />
  <div>Slide 1</div>
  <div>Slide 2</div>
  <CustomIcon slot="right-control" />
</Carousel>

Links

• Demo
• Why Avoid Carousels: Article 1 , [Article 2](https://www.impactplus.com/blog/why-homepage-car