@cloudparker/easy-horizontal-scroller-svelte

easy-horizontal-scroller-svelte

A lightweight and user-friendly library for implementing horizontal scrolling on both web and mobile UIs. This intuitive scroller relies solely on the drag feature, providing a seamless and responsive experience across various devices.

Install

npm install @cloudparker/easy-horizontal-scroller-svelte --save-dev

Screenshot

Usage

<script>
	import EasyHorizontalScroller from '@cloudparker/easy-horizontal-scroller-svelte';
</script>

<EasyHorizontalScroller height="136px">
	{#each Array(100) as _, index}
		<div class="item" on:click={()=> console.log("clicked")}>{index}</div>
	{/each}
</EasyHorizontalScroller>

<style>
	.item {
		background-color: aquamarine;
		min-width: 128px;
		min-height: 128px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 4px;
		border: 1px solid #d1d1d1;
		border-radius: 5px;
	}
</style>

Props

height:string

Required

Height of the scroller e.g 136px