[Help]: How can I make a Card Carousel

[quick007]

Hi all,

I was wondering how I could make a card carousel, similar to this:
![image](https://user-images.githubusercontent.com/69743171/188250440-1e7b585b-dbe7-43b2-94f8-6f34110aadce.pngHere'sres my current code:

<div className="overflow-hidden bg-green-700" ref={emblaRef}>
      <div className="flex gap-5 pt-6 bg-red-600">
        {props.data.map((v, i)  => (
        <div className="group relative ml-10 h-56 w-40 overflow-hidden rounded-xl" >
          <Image
            src="/ghandi.png" //{v.hero}
            layout="fill"
            className="z-0 rounded-l-2xl object-cover object-center transition duration-[2s] ease-in-out group-hover:scale-110"
            alt="Image the of game"
            quality={90}
            priority={false}
          />
          <div className="absolute bottom-0 left-0 right-0 rounded-b-xl bg-gradient-to-t from-black via-black/70 to-transparent px-2 pt-3 pb-2">
            <h3 className="lines-2 mb-1 w-36 pb-[0.05rem] text-2xl font-semibold leading-none text-gray-50">
              Title
            </h3>
            <div className="flex items-center text-xs text-gray-100">
              <p className="">{/*v.downloads*/}1 k</p>
              <ArrowDownTrayIcon className="ml-1.5 mr-2 h-4 w-4" /> •
              <span className="ml-2"></span>
              <StarFilledIcon className="h-3 w-3 text-yellow-500" />
              <StarFilledIcon className="h-3 w-3 text-yellow-500" />
              <StarFilledIcon className="h-3 w-3 text-yellow-500" />
              <StarFilledIcon className="h-3 w-3 text-yellow-500" />
              <StarIcon className="h-3 w-3" />
            </div>
          </div>
        </div>
        ))}
      </div>
    </div>

...Which outputs this mess:

If I remove ref={emblaRef} it looks normal (as in there's no weird left margin). I would also like to mention that if I add a bunch of cards, they start to reduce in size. I also want to add arrows that will go to the next set of cards (not the next card, but to new ones the user can't yet see).

If Embla carousel doesn't support these features, I can probably just code them myself using a scrollbar, some arrows, and just scrolling a bit to the left, but I have to imagine embla has a better way of doing this.

[davidjerleke]

Hi @quick007,

Thanks for your question. There's a lot of CSS going on in your code example so I don't know if that's affecting anything in unintended ways. What version are you using? And you didn't share what options you're using? Should the carousel loop or not?

as in there's no weird left margin

The alignment isn't weird. It's the default setup for Embla which will center align the scroll snaps. If you want to clear leading and trailing space use the following option:

{
  containScroll: 'trimSnaps',
}

I also want to add arrows that will go to the next set of cards (not the next card, but to new ones the user can't yet see).

Then you should group your slides. Try using:

{
  slidesToScroll: 'auto' // note that the 'auto' vaule is only available from version 7 and up
}

So your options should be set to:

{
  containScroll: 'trimSnaps',
  slidesToScroll: 'auto'
}

Read more about these options here: containScroll, slidesToScroll.

I hope this gets you on the right track.

Best,
David

[quick007]

Thanks so much for the fast response! containScroll seems to remove the leading and trailing spaces, and slidesToScroll works as you said it does as well. As you suspected, part of my issue was my CSS, and after testing some different versions without the ref in tailwind play, I was able to fix the problem. For anyone wondering, I swapped the w-40 with min-w-[10rem] (because tw doesn't have preset min-width, although I recommend using min-w-[theme(spacing.40)] in non-hobby projects).

I apologize for missing important info that would help you reproduce the issue (i.e. version and options), but I'm glad that you were able to help anyways!

[davidjerleke]

No worries @quick007, I’m glad you got it sorted. That’s correct because setting width on flex items won’t behave as you would expect. This is purely related to how CSS work and has nothing to do with Embla.

As you said min-width is one way to solve it. Another way to solve it is to set the flex property. If you want your slides to be 50% wide you would use flex: 0 0 50%.

Enjoy!