How to adapt InfiniteSlider on responsive

[AndreaBarghigiani]

Hi Julien,
first and foremost, thank you so much for this fantastic library of components; the fact that you allow us to see the source code for each is a killer feature. I am learning a lot just by reading it 😅

But besides that, I have a little issue with the InfiniteSlider component.

I would like to have it in a vertical direction on mobile and horizontal otherwise. My first approach was to leverage the responsive classes in TailwindCSS to handle the display CSS prop depending on the screen size. You know, something like flex flex-col items-center lg:block, but it didn't work out.

Since I am using Next.js and shadcn/ui the next step has been to use the useMediaQuery hook that you can find in the Credenza component I've implemented like that:

'use client';

// Utils
import { cn } from '@/src/lib/utils';
import useMediaQuery from '@/src/hooks/use-media-query';

// Components
import { InfiniteSlider } from '@/comp/ui/infinite-slider';

const logos = [
// Strings of logo names
];

const tailwindLg = '(min-width: 1024px)';

const LogosScroll = () => {
  const isTailwindLg = useMediaQuery(tailwindLg);

  return (
    <InfiniteSlider
      gap={isTailwindLg ? 120 : 24}
      duration={80}
      direction={isTailwindLg ? 'horizontal' : 'vertical'}
      className={cn('', {
        'flex max-h-64 flex-col items-center': !isTailwindLg,
      })}
    >
      {logos.map((logo) => (
        <div
          key={logo}
          className="flex h-20 w-full items-center justify-center"
        >
          <img src={`/images/logos/${logo}.svg`} alt={logo} />
        </div>
      ))}
    </InfiniteSlider>
  );
};

export default LogosScroll;

Obviously, I didn't expect it to work while resizing the browser window, but on the desktop, the slider animation does not work even if I reload the page.

Hopefully you will find some time to have a look at my issue.

[AndreaBarghigiani]

Well, to be honest the solution was simpler than I thought 😅

All I had to do was to add a key to let Framer Motion understand the difference between the different directions and the Scroll started to work in both ways 💪

Thank you so much for this library 🎉