React-slick: Problem in rendering Slider with dynamic children

[chochihim]

If I render Slider as below:

<Slider {...settings}>
    {slides.map((slide) => (
        <div key={slide.index}>{slide.index}</div>
    ))}
</Slider>

nextProps.children.length in componentWillReceiveProps of class InnerSlider will always returns 1 which breaks the sliding logic.

Does Slider not expect dynamic children?

[akiran]

Can you reproduce the issue with this jsfiddle and provide link
https://jsfiddle.net/kirana/20bumb4g/

[chochihim]

Sure. Here's the implementation of my described problem: https://jsfiddle.net/8qLhy7do/1/

If options slidesToShow and slidesToScroll are set to 1, it works fine: https://jsfiddle.net/8qLhy7do/2/

[walston]

Hey chochihim, it looks like you're not returning your <div> inside map()

try:

<Slider {...settings}>
    {slides.map((slide) => (
        return (<div key={slide.index}>{slide.index}</div>);
    ))}
</Slider>

[chochihim]

@walston no, mine is valid shorthand

In my jsfiddle example, the initial rendering is fine but not after clicking 'Add slide'.

[anonmily]

+1 Having this issue too. On version 0.14.5 for react-slick.

[roik7]

+1

[zhujunel]

version 15.3.2 Cannot read property 'getBoundingClientRect' of null

[hackhat]

+1 same here. basically this line fails return elem.getBoundingClientRect().height || elem.offsetHeight; because elem is null. It comes from slickList.querySelector('[data-index="0"]').

[szimek]

@hackhat I had exactly the same issue and fixed by adding data-index attribute to my slide elements, more or less like this:

<Slider {...settings}>
  {slides.map((slide, index) => (
    <div data-index={index} key={index}>{index}</div>
  ))}
</Slider>

I've just started adding this library to my project, so I'm not sure if it won't cause some other issues later on.

[hackhat]

@szimek That's the same thing I did, but something doesn't feel right about it.

[ShuaiShuaiguo]

@hackhat you can try this: <Slider {...settings}> <div> {slides.map((slide, index) => ( <div key={index}>{index}</div> ))} </div> </Slider>

[hackhat]

@ShuaiShuaiguo You mean removing the data-index={index} from the example above (see below code)? I don't think will work, because react-slick needs the data-index attribute.

<Slider {...settings}>
  {slides.map((slide, index) => (
    <div data-index={index} key={index}>{index}</div>
  ))}
</Slider>

[akiran]

Which version of react-slick are you using ?

I don't see this issue with latest release.
Check this demo https://jsfiddle.net/8qLhy7do/6/

[hackhat]

@akiran I got the issue with "version": "0.14.5"

[akiran]

@hackhat Can provide a jsfiddle to replicate your issue ?

[anonmily]

@akiran I was able to reproduce the issue here:

https://jsfiddle.net/17xt8pxw/2/

It seems like if we start out with no children (e.g. this.state.slides = []), then there is a problem. When there is at least one children before the initialization of the slick slider (e.g. this.state.slides = [1]), then it still works.

Edit:
Also, with further investigation, seems like the slick-track element remains empty.

[ShuaiShuaiguo]

@hackhat
no, it needs a certain DOM element, just wraps the dynamic data by any DOM elements, not one of element.it works to me.

[samplefrequency]

+1 This is definitely a bug with 14.5. I pretty much have the same set up as the OP but utilizing a Redux store. My store initializes as empty then is populated later. React-slick shouldn't even be initializing with an empty array.

[akiran]

@samplefrequency Agreed. I will try to fix it soon

[andricicezar]

+1, setting manually data-index solved the problem.

[samplefrequency]

@andricicezar Still won't fix the issue if the array starts off empty and is later populated via AJAX or from a Redux store.

[vdv73rus]

Still not working :/

[akiran]

As a quick workaround, you can mount slider only if you have slides.

{slides.length > 0 ? <Slider>{slides}</Slider> : null }

[vdv73rus]

@akiran I solve this problem almost like you:
{this.state.loading ? <Loader> : <Slider>{slides}</Slider> }

Thanks for react-slick!

[ypyang237]

@akiran {slides.length > 0 ? <Slider>{slides}</Slider> : null } didn't work for me.

Any updates?

[samplefrequency]

Replace 'slides' with the name of the array that contains the slide items. For example, instead of slides.length use yourArray.length

On Nov 14, 2016 18:08, Pam [email protected] wrote:

@akiranhttps://github.com/akiran {slides.length > 0 ? {slides} : null } didn't work for me.

Any updates?

You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://github.com/akiran/react-slick/issues/504#issuecomment-260515785, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AHrj26kslUdhM1D511Y5Em8b_K9x3dGrks5q-QYegaJpZM4KMS5h.

[ypyang237]

Thanks for the quick response @samplefrequency

Unfortunately it still doesn't work. Like you, my array starts off empty and is later populated via AJAX called after the Redux store has been updated (since it needs the new data from the redux store to make the call).

As you suggested, I have replaced it with my own array, and I've also confirmed the length of said array -
this.renderGallery(listing).length shows 7 when rendering it directly below my images.

The below is my renderGallery handler which I call when rendering

renderGallery() {
    if (this.props.listingGalleryImages.data !== undefined) {
      const galleryAssets = this.props.listingGalleryImages.data;
      const images = galleryAssets.map((asset, index) => {
       return (
          <div data-index={index} key={index}><img key={asset.id} src={asset.url} /></div>
        );
      });
      return images;
    }
  }

And inside the render:

<div className="container" >
    {this.renderGallery(listing) !== undefined && this.renderGallery(listing).length > 0 ?      
       <Slider{...settings}>
            <div>{this.renderGallery(listing)}</div>
       </Slider> : null }
    {this.renderGallery(listing) !== undefined ? this.renderGallery(listing).length : null}  
</div>

I don't know if this is clear enough, happy to clarify further.

Btw, I'm using "react-slick": "^0.14.5",
and also have the style sheet included, since initially my Isomorphic / universal React app didn't work without.
https://github.com/akiran/react-slick/issues/273

[anonmily]

@ypyang237 Just as a side note, instead of the ternary

this.renderGallery(listing).length > 0 ? 
        <Slider {...settings}>{this.renderGallery(listing) </Slider> : null

You could actually use && to make it shorter:

( this.renderGallery(listing).length > 0 ) && <Slider {...settings}>{this.renderGallery(listing) </Slider>

[justin3737]

@szimek Thanks, this works for me! 👍

[wldeveloper]

@anonmily thanks i have the same problem as you , it works!

[tanmynguyen]

If {...settings} you set lazyLoad: true will not work. with data.length < settings.slidesToShow !!!

[edwardaa7]

Doesn't work with react components

https://jsfiddle.net/8qLhy7do/21/

[NamanAulakh]

I also stuck in this issue, but now it's working fine for me:

<Slider
   ref={c => this.slider = c}
   {...settings}
   afterChange={this.changeState}>
   {content.map((item, index) => <p key={index}>{item}</p>)}
</Slider>

I hope it helps.

[akiran]

This issue is fixed in master

[rolandokaizer]

When will this fix be added to NPM?

[nabendukarmakar]

Still facing the same issue with this release --
https://github.com/akiran/react-slick/releases/tag/0.15.0

[bnolens]

Make sure data-index is an integer. And if your slide is a component, make sure to set the data-index attribute to the root element of your slide component.

Your slide component could look something like this:

const Slide = ({ dataIndex }) => {
    return(
        <div data-index={dataIndex} key={dataIndex}>
            <p>Slide {dataIndex}</p>
        </div>
    )
}

This fixed it for me.

[niklasp]

How is it possible to do what @ypyang237 did first? I need a slider that has that setup

<Slider{...settings}>
   <div><div className="inner">{this.renderGallery(listing)}</div></div>
</Slider> : null }

And slick only to pick up like .inner as slides. In original slick-slider there is the slide attribute, which tells slick from which selectors to create the slides. It seems not implemented in react-slick?

[hpachy]

Hello I still have the same problem... what the hell is going on... look at the width size...

my code :

<div>
      <h2>Custom Arrows</h2>
      <Slider {...settings}>
       <div>
          <h3>1</h3>
        </div>
        <div>
          <h3>2</h3>
        </div>
        <div>
          <h3>3</h3>
        </div>
        <div>
          <h3>4</h3>
        </div>
        <div>
          <h3>5</h3>
        </div>
        <div>
          <h3>6</h3>
        </div> 
      </Slider>
    </div>