miralabs-website/src/components/CardSlider/CardSlider.svelte

<script>
  import { onMount, afterUpdate } from "svelte";
  import { tweened } from "svelte/motion";
  import { cubicOut } from "svelte/easing";

  export let cards = [];

  let currentIndex = 0;
  let container;
  let bullets = [];
  let isDragging = false;
  let startX = 0;
  let currentTranslate = 0;
  let prevTranslate = 0;
  let animationID;

  const x = tweened(0, {
    duration: 400,
    easing: cubicOut,
  });

  function handleTouchStart(event) {
    startX = event.type.includes("mouse")
      ? event.pageX
      : event.touches[0].clientX;
    isDragging = true;
    animationID = requestAnimationFrame(animation);
    container.classList.add("grabbing");
  }

  function handleTouchMove(event) {
    if (isDragging) {
      const currentPosition = event.type.includes("mouse")
        ? event.pageX
        : event.touches[0].clientX;
      currentTranslate = prevTranslate + currentPosition - startX;
      setSliderPosition();
    }
  }

  function handleTouchEnd() {
    cancelAnimationFrame(animationID);
    isDragging = false;
    container.classList.remove("grabbing");

    const movedBy = currentTranslate - prevTranslate;

    if (movedBy < -100 && currentIndex < cards.length - 1) {
      currentIndex += 1;
    } else if (movedBy > 100 && currentIndex > 0) {
      currentIndex -= 1;
    }

    currentIndex = Math.min(Math.max(currentIndex, 0), cards.length - 1);
    setPositionByIndex();
    updateBullets();
  }

  function setPositionByIndex() {
    currentTranslate = -currentIndex * container.offsetWidth;
    prevTranslate = currentTranslate;
    x.set(currentTranslate);
  }

  function animation() {
    if (isDragging) requestAnimationFrame(animation);
  }

  function setSliderPosition() {
    // Calculate translateX based on currentTranslate, not directly on container
    const translateX = `translateX(${currentTranslate}px)`;
    container.style.transform = translateX;
  }

  afterUpdate(() => {
    bullets = Array.from(container.querySelectorAll(".bullet"));
  });

  function goToSlide(index) {
    currentIndex = index;
    setPositionByIndex();
    updateBullets();
  }

  function updateBullets() {
    bullets.forEach((bullet, i) => {
      bullet.classList.toggle("active", i === currentIndex);
    });
  }

  $: {
    if (bullets.length) {
      goToSlide(currentIndex);
    }
  }
</script>

<div class="flex items-center justify-center flex-col m-[50px_0]">
  <div class="slider-container" bind:this={container} style="padding: 0 16px;">
    <div class="slider" style="position: relative; overflow: hidden;">
      {#each cards as card, index}
        <div
          class="card"
          style="margin-right: 16px; transform: translateX({$x}px);"
        >
          <img src={card.image} alt={card.title} />
          <h4>{card.title}</h4>
          <p>{card.text}</p>
        </div>
      {/each}
    </div>
  </div>

  <div class="bullets">
    {#each cards as _, i}
      <div
        class="bullet"
        class:active={i === currentIndex}
        on:click={() => goToSlide(i)}
      ></div>
    {/each}
  </div>
</div>

<style>
  .slider-container {
    width: 320px; /* Display one card width */
    position: relative;
    /* box-shadow: 9px 3px 10px 1px #0000002b; */
    border-radius: 10px;
  }

  .slider {
    display: flex;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  .card {
    flex: 0 0 calc(320px - 16px); /* Adjust for spacing */
    height: 377px;
    width: 315px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    margin-right: 16px; /* Space between cards */
    padding: 20px;
  }

  .card img {
    width: 223px;
    height: 139px;
    object-fit: cover;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  .card h4 {
    margin: 16px 0;
    font-size: 12px;
    text-align: center;
    font-weight: 700;
  }

  .card p {
    padding: 0 16px;
    line-height: 18px;
    text-align: center;
    font-weight: 400;
    font-size: 10px;
  }

  .bullets {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }

  .bullet {
    width: 10px;
    height: 10px;
    background: #ccc;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
  }

  .bullet.active {
    background: #1340ff !important;
  }

  .grabbing {
    cursor: grabbing;
  }
</style>