Theo's Typesafe Cult•3mo ago

Help with react carousel

Hey is someone here good with react carousel libraries? I need to accomplish something like this with the non focused cards in the carousel being stacked be under the focused one. I tried the one in shadcn but that got me nowhere. TLDR. What do you use for Carousel? && Is this achievable ? TY

Carousel

A carousel with motion and swipe built using Embla.

Solution:

```jsx
<div className="relative mx-4 max-w-[1050px] flex-[0_0_80%] transition-all duration-300 ease-in-out"/> ...

Jump to solution

3 Replies

Maxcohen•3mo ago

Check out pile layout or looper machine https://youtu.be/6qpEOBkDr88?si=7tBq-3AyZFQR1ATK https://youtu.be/vwgihljM2e4?si=0hEf69GbXgyAxnQ3

Chrome for Developers

YouTube

The Pile Mini Web Machine

The Pile is a CSS and HTML mini web machine that enables easy and powerful element layering, like how a discard pile or dog pile work, last in is on top. This layout mini web machine replaces many use cases for position absolute, offers keyword alignments, optional z-index management, no container collapsing (i'm looking at you container with ab...

Chrome for Developers

YouTube

The Looper Mini Web Machine

Introducing Mini Web Machines, where we dive into small groups of code that drive rad user experiences. This debut episode showcases The Looper, aka a radio group. Copy the code → https://goo.gle/3TTzLMv Resources: The Looper roving UX → https://goo.gle/3VLjaNI Cyclical radio group → https://goo.gle/3Jcqjz3 Radiento bento group → https://go...

dzendaOP•3mo ago

Thanks I'll take a look It looks cool but I don't think it solves my issue

Solution

dzenda•3mo ago

        
<div
className="relative mx-4 max-w-[1050px] flex-[0_0_80%] transition-all duration-300 ease-in-out"/>

  const [emblaRef, emblaApi] = useEmblaCarousel({
    align: 'center',
    containScroll: 'trimSnaps', //this line
  });

        
<div
className="relative mx-4 max-w-[1050px] flex-[0_0_80%] transition-all duration-300 ease-in-out"/>

  const [emblaRef, emblaApi] = useEmblaCarousel({
    align: 'center',
    containScroll: 'trimSnaps', //this line
  });

This is how i solved the issue

Gaming

Programming

Help with react carousel

Did you find this page helpful?