We can add a prop so that Slick does not add width: 100%; display: inline-block; ?

Slick is adding those styles to the Slider items and I must use important in the original styles to not lose them. This would be a very good idea, this is not the first time this has happened with Slick.

import React from 'react'
import ImageCircle from '../ImageCircle';
import Slider from "react-slick";
import './styles.scss'

export default ({ images, isAvatar }) => {
  const settings = {
    dots: false,
    infinite: true,
    autoplaySpeed: 2000,
    slidesToShow: 5,
    slidesToScroll: 5,
    autoplay: true,
    responsive: [],
    arrows: false,
    centerPadding: '100px',
    accessibility: false,
  };
  return (
    <div className='GalleryImages'>
      <Slider {...settings}>
        {
          Array.isArray(images) && images.map((img) => (
            <div className='BlockImage' key={img.url} >
              <div className='BlockOverlary' />
              {
                isAvatar ? (
                  <ImageCircle
                    style={{
                      width: '100px',
                      height: '100px',
                      margin: 'auto'
                    }}
                    img={img.url}
                    alt={img.alt}
                  />
                ) : (
                    <img
                      src={img.url}
                      alt={img.alt}
                    />
                  )
              }
            </div>
          ))
        }
      </Slider>
    </div>
  )
}

If you allow me, I can do a PR. But we should discuss the name of the prop.

[alexfromesper]

To anyone still looking for a solution…

Try wrapping your list components in a react fragment. This worked for me.

<React.Fragment key={id}> <Item> </Item> </React.Fragment>

[CharlyJazz]

No