I have created a slider component in svelte that shows a number of product cards in a list. The cards are snapping when clicking the right/left button in the scrollbar sinceI have added "scroll-snap-type: x mandatory" in the CSS for the container.
How do i mimic click on the scrollbars left/right-arrows for my custom navigation buttons? Setting the scrollbar position won't do the trick.
+page.svelte
<SliderProducts> {#each data.productsFeaturedData as product}<ProductCard product={product}/> {/each}</SliderProducts>SliderProducts.svelte
<script lang="ts"> import Flex from '../atoms/Flex.svelte'; import ButtonNavigation from '../molecules/ButtonNavigation.svelte'; $: innerWidth = 0; $: containerWidth = 0; $: marginOffset = (innerWidth - containerWidth) / 2 + 8; const navigateSlider = (x: MouseEvent) => { if (x.target) { const element = x.target as HTMLButtonElement; const direction = element.dataset.direction; // TODO: Implement button navigation console.log(direction); } };</script><svelte:window bind:innerWidth /><div class="slider-products"><div class="container" bind:clientWidth={containerWidth}><h2>Trending in Shoes</h2><div class="button-navigation__container"><ButtonNavigation direction="left" on:click={navigateSlider} /><ButtonNavigation direction="right" on:click={navigateSlider} /></div></div><div class="slider-container"><Flex type="row" vAlign="top" colGap={true}><div class="slider-track" style="margin-left: {marginOffset}px; padding-right: {marginOffset}px;"><slot /></div></Flex></div></div>