Infinite items growing

[yosisms]

I can not use react-multi-carousel because its inifinte items growing....

this is the versions: "react": "^17.0.2", "react-dom": "^17.0.2", "react-helmet": "^6.1.0", "react-multi-carousel": "^2.8.0", "react-router-dom": "^6.2.1", "react-scripts": "5.0.0", "sass": "^1.49.8", "typescript": "^4.5.5", "web-vitals": "^2.1.4"

This is the code `import React from 'react';

import Carousel from 'react-multi-carousel'; import 'react-multi-carousel/lib/styles.css';

const Carousela = () => {

const responsive = {
    superLargeDesktop: {
        // the naming can be any, depends on you.
        breakpoint: { max: 4000, min: 3000 },
        items: 5
    },
    desktop: {
        breakpoint: { max: 3000, min: 1024 },
        items: 3
    },
    tablet: {
        breakpoint: { max: 1024, min: 464 },
        items: 2
    },
    mobile: {
        breakpoint: { max: 464, min: 0 },
        items: 1
    }
};

return (
    <Carousel responsive={responsive}>
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
        <div>Item 4</div>
    </Carousel>
);

}

export default Carousela;`

This is the bug:

https://user-images.githubusercontent.com/68784954/154791197-5261e5fa-814d-48c5-b253-9b9013c70458.mov

[jtas01]

I am also trying to add super large desktop, but it is not working.

[lmvicente]

Also getting this same issue even with the simple usage posted in the documentation.

[omar212]

Has there been a fix for this ?

[Babettestam]

I was getting the same issue, for me the container had a padding which somehow confused the plugin. When I added the styling box-sizing: border-box to the container with the padding, it was solved.

[adirha]

I have the same issue too, someone solved it?

[michael-k-taylor]

I am also getting this issue, its seems the transform set on the ul goes infinite, then glitches are resets.

anyone got a fix for this,

If you set it to a fixed width it seems to work rather a 100% but that doesnt really help!

box-sizing: border-box didnt work either.

[PrettyMuffin]

For me the problem was that the parent container had a display:flex property, after I removed display: flex everything worked just fine. Instead of display: flex i used display:grid.

[amansadhwani]

I solved it by wrapping the carousel component with two divs the first div I gave position: 'relative and width: 100%;' for the second div, I gave position: 'absolute and width: 100%;'