[Help]: Auto play does not work if I increase the width of the element with the is-snapped class

[saeedyussif663]

Summary

I am using the class name plugin which works fine. but i'm trying to change the width and height of the element with is-snapped property but once i do that auto play stops to work

If applicable, which variants of Embla Carousel are relevant to this question?

• embla-carousel (Core)
• embla-carousel-react
• embla-carousel-vue
• embla-carousel-svelte
• embla-carousel-autoplay
• embla-carousel-auto-scroll
• embla-carousel-solid
• embla-carousel-auto-height
• embla-carousel-class-names
• embla-carousel-fade
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

Additional information

import Autoplay from "embla-carousel-autoplay";
import ClassNames from "embla-carousel-class-names";
import useEmblaCarousel from "embla-carousel-react";
import { useRef } from "react";

export default function Reviews() {
  const reviews = Array.from(Array(10).keys());

  const containerRef = useRef();

  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true }, [
    ClassNames(),
    Autoplay({ delay: 3000, stopOnInteraction: false }),
  ]);

  return (
    <div className="flex flex-col gap-8 py-10 md:py-20">
      <div className="px-4">
        <h3 className="mx-auto w-fit bg-gradient-to-r from-black to-Tertiary bg-clip-text text-center text-32 font-semibold text-transparent">
          Testimonials
        </h3>
        <p className="mt-3 text-center text-base text-DarkerGray md:text-lg">
          Read what our past students have said about their experience.
        </p>
      </div>

      <div className="overflow-x-hidden" ref={emblaRef}>
        <div className="flex w-full gap-[15px]" ref={containerRef}>
          {reviews.map((item, index) => (
            <ReviewCard key={index} />
          ))}
        </div>
      </div>
    </div>
  );
}

function ReviewCard() {
  return (
    <article className="review-card">
      <img src="/user.png" alt="name" className="size-8 rounded-full" />

      <div className="mt-2">
        <h5 className="text-lg font-semibold text-Primary">Black, Marvin</h5>
        <p className="mt-0.5 text-xs text-DarkGray">Python Developer</p>
      </div>

      <p className="mt-2 text-sm text-DarkerGray">
        As a former graphic designer, I loved how Slightly Techie integrated UX
        principles with coding. Now I create beautiful, user-friendly
        interfaces!
      </p>
    </article>
  );
}

.review-card {
  width: 240px;
  flex-shrink: 0;
  flex-grow: 0;
  border-radius: 16px;
  border: 1px solid #f5f5f5;
  background-color: #f5f5f5;
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 56px;
  padding-top: 16px;
  opacity: 0.5;
  transition: all 300ms ease-in-out;
}

.review-card.is-snapped {
  border: 1px solid red;
  opacity: 1;
  width: 300px;
}

.review-card:last-child {
  margin-right: 15px;
}

CodeSandbox example

No response