fix: Version Bump
All checks were successful
Publish Svelte Tailwind Library / build-and-publish (push) Successful in 24s
All checks were successful
Publish Svelte Tailwind Library / build-and-publish (push) Successful in 24s
This commit is contained in:
@@ -1,91 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { spring } from 'svelte/motion';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
export let items: any[] = []; // Array of components/items to display
|
||||
|
||||
let container: HTMLElement;
|
||||
let isDragging = false;
|
||||
let startX: number;
|
||||
let scrollLeft: number;
|
||||
|
||||
const centerOffset = spring(0);
|
||||
|
||||
function handleMouseDown(e: MouseEvent) {
|
||||
isDragging = true;
|
||||
startX = e.pageX - container.offsetLeft;
|
||||
scrollLeft = container.scrollLeft;
|
||||
container.style.cursor = 'grabbing';
|
||||
}
|
||||
|
||||
function handleMouseMove(e: MouseEvent) {
|
||||
if (!isDragging) return;
|
||||
e.preventDefault();
|
||||
const x = e.pageX - container.offsetLeft;
|
||||
const walk = (x - startX) * 2;
|
||||
container.scrollLeft = scrollLeft - walk;
|
||||
updateItemScales();
|
||||
}
|
||||
|
||||
function handleMouseUp() {
|
||||
isDragging = false;
|
||||
container.style.cursor = 'grab';
|
||||
}
|
||||
|
||||
function updateItemScales() {
|
||||
const containerCenter = container.offsetWidth / 2;
|
||||
$centerOffset = container.scrollLeft + containerCenter;
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
container.addEventListener('scroll', updateItemScales);
|
||||
return () => container.removeEventListener('scroll', updateItemScales);
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="gallery-container"
|
||||
bind:this={container}
|
||||
on:mousedown={handleMouseDown}
|
||||
on:mousemove={handleMouseMove}
|
||||
on:mouseup={handleMouseUp}
|
||||
on:mouseleave={handleMouseUp}>
|
||||
|
||||
{#each items as item, i}
|
||||
<div class="gallery-item"
|
||||
style="
|
||||
--scale: {Math.max(0.6, 1 - Math.abs($centerOffset - (i * 300 + 150)) / 1000)};
|
||||
--opacity: {Math.max(0.3, 1 - Math.abs($centerOffset - (i * 300 + 150)) / 1000)};
|
||||
">
|
||||
<svelte:component this={item} />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.gallery-container {
|
||||
width: 100%;
|
||||
overflow-x: scroll;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
padding: 2rem;
|
||||
cursor: grab;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.gallery-container::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
min-width: 300px;
|
||||
height: 400px;
|
||||
transform: scale(var(--scale, 1));
|
||||
opacity: var(--opacity, 1);
|
||||
transition: transform 0.3s ease, opacity 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
Reference in New Issue
Block a user