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

[CharlyJazz]

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.

[wenisy]

any updates here?

[CharlyJazz]

No

[Romcol]

Hi, I found that if you move the rendered div/component (here the one with class BlockImage) to an external function, slick doesn't add those props. Not sure it can help though

[intelligence]

Hi, I found that if you move the rendered div/component (here the one with class BlockImage) to an external function, slick doesn't add those props. Not sure it can help though

Could you elaborate what you mean?

[mimiqkz]

Any solution to this yet? I need to change the width so that in mobile, it won't show just 1st card on load, but a bit of the 2nd card so that user knows this is a slider

[Romcol]

Hi, I found that if you move the rendered div/component (here the one with class BlockImage) to an external function, slick doesn't add those props. Not sure it can help though

Could you elaborate what you mean?

     <Slider {...settings} className={classes.slider}>
        {items..map(item => (
          <MyComponent
            key={item.position}
            otherProp={item.otherProp}
          />
        ))}
      </Slider>

I think that if you separate your code like this, the inline style won't be added. Other solution is you override the inline style. Hope it helps

[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>

[McGern]

@alexfromesper Brilliant, that worked for me. No idea why it should work, but it does.

[socker210]

@alexfromesper This solution is the best. Thank you.