Setting width: 50% to the slide class is not working as intended

[stepanjakl]

Hello,

First of all, thank you for an amazing library!

My issue is that I am not able to set 50% (or other ration) of the width of the embla container to each slide and have a gap between them using a flexbox. Simplified code below:

<div class="embla">
   <div class="embla__viewport">
      <div class="embla__container" style="display: flex; column-gap: 3rem">

         <div class="embla__slide" style="width: 50%">
            <div class="embla__slide__inner">
               <img class="embla__slide__img" src="media/media-1.jpeg" />
            </div>
         </div>
          
         <div class="embla__slide" style="width: 50%">
            <div class="embla__slide__inner">
               <img class="embla__slide__img" src="media/media-2.jpeg" />
            </div>
         </div>

         ...

I managed to reproduce the issue here, the slides are not even showing. I believe it has something to do with the Embla's calculations rather than it being a style issue (please prove me wrong 🙏). I got it working in another project, but the other issue is that the last column in the viewport is always overflowing outside the container (exactly by how much the gap is).

I noticed that in all examples min-width property is used rather than width, why is that? I can understand it when it comes to images, but once you have a textual content that can stretch the wrapper, there is no way to limit it.

[davidjerleke]

Hi @stepanjakl,

I don’t have access to my computer right now. Have you worked your way through these guides in the docs:

• Slide Container
• Slide Sizes
• Slide Gaps

?

Best,
David

[davidjerleke]

@stepanjakl thanks 👍.

Your issue is related to your CSS. I don't think you have been thorough when reading the guides I mentioned. If an element has display: flex;, you can't only set the width property on its child elements, because that's not how flexbox sizing works. There are different ways to achieve what you want.

One way to set the width is to use the CSS in the Slide Sizes guide:

.embla__slide {
  flex: 0 0 50%; /* Slide will be 50% wide */
}

If you still want to stick with setting the width, you can do it like so:

.embla__slide {
  flex-shrink: 0; /* Don't allow flex item to shrink */
  width: 50%;
}

Embla has been around for more than two years and one solid feature has been the flexibility to set any slide sizes you wish. I'm not saying that Embla has been totally bug free (no software is bug free), but users would have picked up this bug by now if this wasn't working as expected. Embla carousel doesn't manipulate slide sizes in any way, it just reads them in order to determine how much it should scroll. So if your slides aren't showing, the culprit will almost always be faulty CSS.

Best,
David

[stepanjakl]

Hello David,

Thank you for you reply! You are right, if I want to use the width property in conjunction with flexbox, I need set the flex-shrink: 0;. That's a great help 🙂

However, the second slide still seems to be off if there is a gap set between the slides (width set at 50%). I am using the column-gap property, margin has the same issue too.

One kitten is missing 😿

See the playground

[davidjerleke]

Hi again @stepanjakl.

That's because the slide sizes and the column gap combined is wider that the viewport. You have slidesToScroll set to 2, which means that every 2 slides will be grouped to act and behave as a single slide like so:

Make sure that 2 slides + the column gap added together isn't wider than the viewport. For example, here's one way to achieve this:

.embla__container {
  ...
  column-gap: 6rem;
}

.embla__slide {
  width: calc(50% - 3rem); /* Remove column-gap divided by 2 (6rem / 2 = 3rem) from each slide */
  flex-shrink: 0;
  ...
}

Best,
David

[stepanjakl]

Gotcha, although even when slidesToScroll is set to 1 with the same width settings, the second slide still sticks outside. I get why that is, I just thought that even these (gap) style nuances are accounted for (programatically). Not a big deal though, I would definitely like to see this in the documentation (unless I missed it).

Thanks again for the help and prompt responses, loving the library nonetheless :)

[davidjerleke]

@stepanjakl,

Gotcha, although even when slidesToScroll is set to 1 with the same width settings, the second slide still sticks outside.

This is intended 🙂. As mentioned in my initial comment, Embla carousel is one of the few carousels that lets you use any CSS you want. If you set a slide gap that’s 2000px, it won’t stop you. It will just read the slide positions and still work when you scroll to the next slide. But of course, the next slide will be 2000px after the previous slide.

One of the main reasons why I built this carousel is because I got annoyed that other carousel libraries manipulate your elements in all sorts of ways, adding position absolute, adding height and all sorts of changes.

You’re welcome to suggest documentation improvements. Feel free to share what changes you would like to see here and describe where you would like it to be in the docs. You can also or fork this library and make a contribution.

Please mark my answer as accepted if you think it answers your questions.

Best,
David