Scrolling scollbar programatically

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>