miralabs-website/src/components/CardSliderv2/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 justify-between"
          style="margin-right: 16px; transform: translateX({$x}px);"
        >
          {#if index === 0}
            <div
              style="
            position: absolute;
            border-radius: 999px;
            height: 379px;
            width: 339px;
            left: 0%;
            top: -10%;
            background-image: radial-gradient(
              circle at center,
              #e9ceff,
              #dbe8ee00 80%
            );
            opacity: 0.3;
            z-index: -100;
          "
            ></div>
          {:else if index === 1}
            <div
              style="
            position: absolute;
            border-radius: 999px;
            height: 379px;
            width: 339px;
            left: 0%;
            top: -10%;
            background-image: radial-gradient(
              circle at center,
              #5e7dff,
              #dbe8ee00 70%
            );
            opacity: 0.2;
            z-index: -100;
          "
            ></div>
          {:else if index === 2}
            <div
              style="
            position: absolute;
            border-radius: 999px;
            height: 379px;
            width: 339px;
            left: 0%;
            top: -10%;
            background-image: radial-gradient(
              circle at center,
              #6E5AFF,
              #dbe8ee00 70%
            );
            opacity: 0.2;
            z-index: -100;
          "
            ></div>
          {:else if index === 3}
            <div
              style="
            position: absolute;
            border-radius: 999px;
            height: 379px;
            width: 339px;
            left: 0%;
            top: -10%;
            background-image: radial-gradient(
              circle at center,
              #5e7dff,
              #dbe8ee00 70%
            );
            opacity: 0.2;
            z-index: -100;
          "
            ></div>
          {:else if index === 4}
            <div
              style="
            position: absolute;
            border-radius: 999px;
            height: 379px;
            width: 379px;
            left: 0%;
            top: -10%;
            background-image: radial-gradient(
              circle at center,
              #e9ceff,
              #dbe8ee00 70%
            );
            opacity: 0.5;
            z-index: -100;
          "
            ></div>
          {/if}
          <div class="h-[70%] flex items-start justify-center">
            <img src={card.image} alt={card.title} />
          </div>
          <p
            class=" text-[6px] bg-[#F7EFFE] w-fit rounded-lg card-tag"
            style="
           background-color: {index === 0
              ? '#F7EFFE'
              : index === 1
                ? '#F1F3FF'
                : index === 2
                  ? '#6E5AFF1F'
                  : index === 3
                    ? '#1340FF1F'
                    : index === 4
                      ? '#D52CFF12'
                      : '#F7EFFE'};
           color: {index === 0
              ? '#AD50F6'
              : index === 1
                ? '#365DFF'
                : index === 2
                  ? '#6E5AFF'
                  : index === 3
                    ? '#1340FF'
                    : index === 4
                      ? '#D52CFF'
                      : '#AD50F6'};
         "
          >
            {card.tag}
          </p>
          <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: 179px;
    object-fit: cover;
    /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
    margin-top: 20px;
  }

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

  .card p {
    line-height: 18px;
    text-align: left;
    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;
  }

  .card-tag {
    font-size: 6px !important;
    padding: 0px 15px;
    color: #ad50f6;
  }
</style>