Scroll Snap

Podcast.svelte

<script>
  import Maintenance from "./Maintenance.svelte";
  import PodcastCard from "./PodcastCard.svelte";
  import SectionHeading from "./../utils/SectionHeading.svelte";
  import Container from "./../utils/Container.svelte";

  const books = [];

  let scrollArea;

  let onNext = () => {
    scrollArea.scrollBy(200, 0);
  };

  let onPrev = () => {
    scrollArea.scrollBy(-200, 0);
  };
</script>

<div class="relative">
  <Maintenance />

  <div class="">
    <Container>
      <div class="py-1" id="podcast" />
      <SectionHeading text1="MON" text2="PODCAST" breakWord />

      <div
        class="uppercase animate-pulse tracking-wider text-sm mb-8 text-gray-300 flex items-center"
      >
        <ion-icon name="bulb" class="text-lg mr-2" />
        Glissez vers la gauche ou la droite
      </div>

      <!-- MY PERSONAL SLIDER -->
      <!-- MY PERSONAL SLIDER -->
      <div class="relative">
        <div bind:this={scrollArea} class="flex snap-parent w-full pb-10">
          {#each books as book (book.id)}
            <div
              class="snap-child min-w-full md:min-w-[30rem] md:max-w-[30rem] mx-4"
            >
              <PodcastCard {...book} />
            </div>
          {/each}
        </div>
        <button on:click={onPrev} class="btn btn-nav absolute left-2 top-2">
          <ion-icon class="text-2xl text-gray-800" name="arrow-back-circle" />
        </button>
        <button on:click={onNext} class="btn btn-nav absolute right-2 top-2">
          <ion-icon
            class="text-2xl text-gray-800"
            name="arrow-forward-circle"
          />
        </button>
      </div>
      <!-- END MY PERSONAL SLIDER -->
      <!-- END MY PERSONAL SLIDER -->
    </Container>
  </div>
</div>

<div class="pb-32" />

<style>
  .snap-parent {
    overflow: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
  }
  .snap-child {
    scroll-snap-align: start;
  }
</style>