Displaying react components in carousel using react-slick

Question

I am trying to use react-slick for displaying my custom Components inside carousel:

    <Slider {...settings}>
        <Hello />
        <Hello />
    </Slider>

But seems that react-slick doens't support such way of using.

JsFiddle demo

https://jsfiddle.net/jqLzpewm/

Answer 1

It works, it's all about styling the carousel. I've updated your fiddle to show that it works: https://jsfiddle.net/ox1ujxa4/1/

Just some minor styling made:

<div style={{display: 'inline-block', width: 500}}>
  Hello
</div>

Answer 2

I had this problem today. I had a stateless Slide component, and I was doing something like this:

<Slider {...settings}>
    {
        slideTitles.map((title) => {
            return <Slide title={title} />;
        });
    }
</Slider>

The slides were getting stacked on top of each other, as if all were being treated as parts of a single slide.

I noticed that react-slick wasn't applying the attributes it should to each slide, i.e.:

<div data-index="3" 
     class="slick-slide" 
     tabindex="-1" style="outline: none; width: 146705px;" 
     data-reactid=".0.0.1.0.$original3">

Here is the solution (for stateless components at least):

<Slider {...settings}>
{
    slideTitles.map((title) => {
        return Slide({title});
    });
}
</Slider>

JsFiddle

Answer 3

You need to wrap your React component with <div>:

 <Slider {...settings}>
    <div>
        <Hello />
    </div>
    <div>
        <Hello />
    </div>
 </Slider>

Or:

<Slider {...settings}>
    {
        slideItems.map((slideItem) => (
            <div key={slideItem.id}>
                <Slide title={slideItem.title}/>
            </div>
        ))
    }
</Slider>

data-index, class, tabindex and style attributes will be added to that <div>

Answer 4

Add wrapper to component and it should work.

 <Slider {...settings}>
    <div>
        <Hello />
        <Hello />
      </div>
 </Slider>