Svelte Carousel

A super lightweight, super simple Carousel for Svelte 3
Alternatives To Svelte Carousel
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Vue Awesome Swiper12,5592,2434496 months ago58March 19, 2022309mitJavaScript
🏆 Swiper component for @vuejs
Tiny Slider4,9179948a month ago84October 26, 2021362mitHTML
Vanilla javascript slider for all purposes.
Splide3,82132a month ago148September 21, 202244mitTypeScript
Splide is a lightweight, flexible and accessible slider/carousel written in TypeScript. No dependencies, no Lighthouse errors.
8 months ago12otherJavaScript
blueimp Gallery is a touch-enabled, responsive and customizable image & video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers. It features swipe, mouse and keyboard navigation, transition effects, slideshow functionality, fullscreen support and on-demand content loading.
Siema3,447109413 months ago28February 14, 201856otherJavaScript
Siema - Lightweight and simple carousel in pure JavaScript
React Image Gallery3,410517926 days ago110July 30, 202214mitJavaScript
React carousel image gallery component with thumbnail support 🖼
Nuka Carousel2,88649113312 days ago131September 22, 202227otherTypeScript
Small, fast, and accessibility-first React carousel library with an easily customizable UI and behavior to fit your brand and site.
React Responsive Carousel2,43379413723 days ago122March 03, 202229mitTypeScript
React.js Responsive Carousel (with Swipe)
Lightslider1,96761162 years ago6October 25, 2016273mitJavaScript
JQuery lightSlider is a lightweight responsive Content slider with carousel thumbnails navigation
Vue Carousel1,62632959a year ago42March 21, 2019224mitJavaScript
A flexible, responsive, touch-friendly carousel for Vue.js
Alternatives To Svelte Carousel
Select To Compare

Alternative Project Comparisons

This project is now archived. We don't use carousels any more, and you shouldn't either.

Svelte Carousel

js-standard-style CircleCI svelte-v2 svelte-v3

Svelte Carousel / Slider

This is a ground-up rewrite of the original Svelte Carousel/Slider using Svelte v3, and Siema, the goal being a fully working carousel with a tiny size.


This library is pure javascript, so can be used with any framework you like.


The simplest possible demo

npm install
npm run dev # http://localhost:12001

To use within a Svelte application:

npm i -D @beyonk/svelte-carousel


  <div class="slide-content">Slide 1</div>
  <div class="slide-content">Slide 2</div>
  <div class="slide-content">Slide 3</div>
  <div class="slide-content">Slide 4</div>

	import Carousel from '@beyonk/svelte-carousel'
	import { ChevronLeftIcon, ChevronRightIcon } from 'svelte-feather-icons'



You can set the controls to be anything you like, though the default height and width are set to 40px. Just use the slots available to insert your own content.

npm i -D svelte-feather-icons
  <span class="control" slot="left-control">
    <ChevronLeftIcon />
  <div class="slide-content">Slide 1</div>
  <div class="slide-content">Slide n</div>
  <span class="control" slot="right-control">
    <ChevronRightIcon />

	import Carousel from './Carousel.svelte'
	import { ChevronLeftIcon, ChevronRightIcon } from 'svelte-feather-icons'

If you need to override height and width, you can use CSS:

	.control :global(svg) {
		width: 100%;
		height: 100%;
		color: #fff;
		border: 2px solid #fff;
		border-radius: 32px;


You can pass the following attributes:

Attribute Type Default Value Description
loop boolean true At the end of the carousel, loop through to the first slide again, seamlessly
perPage integer 3 Number of slides on a single page. Note that this needs to be less than or equal to the number of slides in your carousel
autoplay integer 0 Auto-change slide at an interval (in milliseconds). 0 means don't autoplay.
duration number 200 Slide transition duration in milliseconds.
easing string 'ease-out' It is like a CSS transition-timing-function — describes acceleration curve.
startIndex number 0 Index (zero-based) of the starting slide.
draggable boolean true Use dragging and touch swiping.
multipleDrag boolean true Allow dragging to move multiple slides.
dots boolean true Toggles visibility of slider dots.
controls boolean true Toggles visibility of slider controls. dots.
threshold number 20 Touch and mouse dragging threshold (in px).
rtl boolean false Enables layout for languages written from right to left (like Hebrew or Arabic).

perPage can also be set to a responsive object, to change the number of slides based on screen width:

<Carousel perPage={{ 800: 3, 500: 2 }}>
// will show 1 slide below 500px width, 2 at 500, 3 at 800.


The Carousel components emits the following events:

Name Data Description
change { currentSlide, slideCount } currentSlide: The current slide index. Can be a positive or negative integer. slideCount: The number of slides.


You can call left, right, go(slideNumber), pause and resume functions on the slider. For example, for pausing the autoslide while the mouse is hover the carousel

<Carousel bind:this={carousel} on:mouseenter={enter} on:mouseleave={leave}>
<div class="slide-content">Slide 1</div>
<div class="slide-content">Slide n</div>

import Carousel from './Carousel.svelte'
let carousel;

function enter() {

function leave() {
Popular Carousel Projects
Popular Slides Projects
Popular User Interface Components Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Vanilla Js