Here is my Svelte component
<script lang="ts">

  let data = $props();
  let activeIndex = $state(0);

  function selectLand(index: number) {
    activeIndex = index;
  }

  $effect(() => console.log(data));
</script>

<div class="lands-map-mobile">
  <!-- <img src={data?.lands[0].posterMobileImage.externalPath} alt="" /> -->
  <div
    class="lands-map-container"
    style={`
   background: linear-gradient(0deg, var(--sf-color-neutrals-black-20, rgba(0, 0, 0, 0.20)) 0%, var(--sf-color-neutrals-black-20, rgba(0, 0, 0, 0.20)) 100%), url('${data?.lands?.[0]?.posterMobileImage?.externalPath}') lightgray 50% / cover no-repeat;`}
  >
    <div class="land-content">
      <ul class="land-features">
        {#each data?.lands[0].features as feature}
          <li>{feature.title}</li>
        {/each}
      </ul>
      <div class="land-cta">
        <!-- <Button title="Discover more" /> -->
        <h4>Hello world</h4>
      </div>
    </div>
    <ul class="lands-grid">
      {#each data?.lands as land}
        <li class="land-card">
          <div
            class="land-card-content"
            style="background-image: url({land?.thumbnailImage
              ?.externalPath}); border: 1px solid #fff;"
          >
            <img class="land-card-logo" src={land?.logoImage?.externalPath} alt={land.name} />
          </div>
        </li>
      {/each}
    </ul>
  </div>
</div>

<style>
  .lands-map-mobile {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: var(--sf-color-primary-base);
    padding: 24px;
    position: relative;

    & .lands-map-container {
      --bottom-spacing: 26px;
      height: 100%;
      width: 100%;
      border-radius: var(--sf-spacing-16px);
      display: flex;
      flex-direction: column;
      justify-content: end;
      background-position: center;
      background-size: cover;
      padding-bottom: var(--bottom-spacing);

      & .land-content {
        & .land-features {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          color: white;
          gap: var(--sf-spacing-12px);
          justify-content: center;
          padding-bottom: var(--sf-spacing-24px);
        }

        & .land-cta {
          color: white;
          text-align: center;
          padding-bottom: calc(var(--bottom-spacing) + var(--sf-spacing-32px));
        }
      }

      & .lands-grid {
        position: absolute;
        left: 0;
        right: 0;
        width: 100%;
        display: flex;
        flex-direction: row;
        gap: var(--sf-spacing-24px);
        overflow-x: scroll;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-snap-type: x mandatory;
        padding-inline: var(--sf-spacing-24px);

        &::-webkit-scrollbar {
          display: none;
        }

        & .land-card {
          min-width: 75px;
          min-height: 40px;
          width: 100%;
          height: 100%;
          scroll-snap-align: center;
          /* display: flex;
          justify-content: center;
          align-items: center; */
          /* flex-shrink: 0; */

          & .land-card-content {
            border-radius: var(--sf-border-radius-xs);
            background-position: center;
            background-size: cover;
            & .land-card-logo {
              font-size: 12px;
            }
          }
        }
      }
    }
  }
</style>


I want the lands-grid to be infinite scroll, meaning I could easily swipe and the grid will loop. Also, I want there should always be a centered selected item