esenlerotogari is a Svelte carousel built for horizontally browsable content like cards, product rows, media rails, featured lists, and custom sliders.

It helps you give users a smoother way to explore wide sets of content without building carousel logic from scratch. You can reveal partially hidden items, move page by page, jump to a specific card, and keep control over how the scroll aligns and animates.

pnpm add esenlerotogari

You can also install it with npm or yarn if that matches your project.

<script lang="ts">
	import { expoOut } from 'svelte/easing';
	import { Carousel } from 'esenlerotogari';

	let carousel: Carousel;
	const items = Array.from({ length: 6 }, (_, i) => ({ title: `Card ${i + 1}` }));
</script>

<Carousel
	gap={16}
	padding={24}
	easingFunction={expoOut}
	easingDuration={500}
	onPageData={(data) => console.log(data)}
	bind:this={carousel}
>
	{#each items as item, i}
		<div style="width: 280px; height: 160px;" on:click={() => carousel.goTo(i + 1)}>
			{item.title}
		</div>
	{/each}
</Carousel>

<button on:click={() => carousel.goToPreviousPage()}>Previous</button>
<button on:click={() => carousel.goToNextPage()}>Next</button>

Bind the component with bind:this to access its methods.

Scrolls to a specific item using a 1-based index.

• index: item number starting from 1
• forceAlign: 'left' | 'right' | false, defaults to false

When forceAlign is omitted or set to false, the carousel only scrolls as much as needed to bring the item into view. When forceAlign is set to 'left' or 'right', the scroll position is fully aligned to that side of the target item.

Moves to the next calculated page.

Moves to the previous calculated page.

Scrolls to a raw horizontal pixel offset.

Returns the current item visibility state:

{
	visible: number[];
	hidden: number[];
	fullyVisible: number[];
	partiallyVisible: number[];
}

All item numbers are 1-based.

Returns the current pagination snapshot:

{
	totalPages: number;
	currentPage: number;
	currentPageFloat: number;
	maxItemsPerPage: number;
	pageProgress: number;
	canGoLeft: boolean;
	canGoRight: boolean;
}

• The component renders children in a single horizontal flex row.
• Direct children are set to flex-shrink: 0, so items keep their width.
• For best results, give each child an explicit width or min-width.
• Page calculations are based on how many items are fully visible in the viewport.
• Item and page navigation use 1-based indexing, not 0-based indexing.