The width of the slide in accordance with the width of the content.

[Dima-Dim]

If you use a carousel for texts, then the same width for the slides may not be optimal and it may be convenient to be able to set the max-width of the slide, but the widths themselves should be adjusted to the width of the content.

[piotr-s-brainhub]

@Dima-Dim

Thanks for this suggestion but could you also provide the following?

• example code using react-carousel
• a screenshot of the current behavior
• an image showing the expected behavior

[Dima-Dim]

Suppose we have the following initial data:

const data = [
  {
    id: 0,
    name: "Simple Long Text",
  },
  {
    id: 1,
    name: "Text",
  },
];

получаем вот такой вариант: these are two slides 172px wide. Yes, some stylization has been applied here, but it does not affect the mechanism for forming the width of the carousel elements.

I would like to be able to get something like this: In this case, these are 124px and 38px slides.

Now we achieve this with:

const resetStaticWidthForItems = (node: HTMLUListElement) => {
  const items = node.querySelectorAll("li");
  items.forEach((item) => {
    item.setAttribute("style", "width: auto;");
  })
};

[piotr-s-brainhub]

Thanks @Dima-Dim

Are you able to provide code applicable in the clickable docs?

[samcohen9617]

This fix does not work! When the carousel is set to infinite and you change the width of the carousel items the logic that moves the carousel fails. For me it continues to jump back to the end of the carousel when it is about to complete a full iteration.