React-slick: Cant get react-slick to work

[Montoo]

I installed react-slick using _npm install --save react-slick_ and _npm install slick carousel_ for the styling. However, I cant get react-slick to work. I implemented the same code used in jfiddle like this:

But when I run my program I get the following result:

[kimiyang]

I also encountered similar issue, I just copy the example code in GitHub example

var React = require('react');
var Slider = require('react-slick');
var SimpleSlider = React.createClass({
  render: function () {
    var settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1
    };
    return (
      <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>
    );
  }
});

anyone encountered before?

[pmdownie]

Have you included the slick.css file in the head of the public index.html file?

[kimiyang]

@pmdownie yes i added still not working, anyway I switched to use nuka-carousel which also satisfies my need.

[bel0v]

you should include styles from slick-carousel.
I've got it like this (using webpack):

import Slider      from 'react-slick';
import 'slick-carousel/slick/slick-theme.css';
import 'slick-carousel/slick/slick.css';

or, you can add these styles in html if you don't use any bundlers

[kimiyang]

@FoxWhite I tried, still doesn't work, but thanks

[krstffr]

I get this error when adding the code example from the readme file (and also I seem to get the same error as the people above):

Warning: Unknown props `currentSlide`, `slideCount` on <button> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop
    in button (created by PrevArrow)
    in PrevArrow (created by InnerSlider)
    in div (created by InnerSlider)
    in InnerSlider (created by Slider)
    in Slider (at carousel-flickety.jsx.js:5)
    in Unknown (at vote-on-submissions-template-container.jsx.js:99)
    in div (at vote-on-submissions-template-container.jsx.js:92)
    in div (at row.jsx.js:6)
    in ChildWrapper (at row.jsx.js:30)
    in div (at row.jsx.js:23)
    in Row (at vote-on-submissions-template-container.jsx.js:91)
    in div (at page-part.jsx.js:10)
    in PagePart (at vote-on-submissions-template-container.jsx.js:83)
    in div (at vote-on-submissions-template-container.jsx.js:50)
    in SubmissionPageTemplateContainer (created by Connect(SubmissionPageTemplateContainer))
    in Connect(SubmissionPageTemplateContainer) (at page-container.jsx.js:32)
    in div (at page-container.jsx.js:52)
    in PageContainer (created by Connect(PageContainer))
    in Connect(PageContainer) (created by RouterContext)
    in RouterContext (created by Router)
    in Router (at index.js:23)
    in Provider (at index.js:22)
    in RouterContainer (at index.js:33)

EDIT OK, noticed that was another problem (went away when downgrading to 0.14.4), but the problem still persists, still get the same result as the people above.

EDIT 2 Oh shit, nevermind, missed the CSS, my bad! Works now! Keep up the good work 👍

[suheltanveer]

@FoxWhite , can you share your webpack config please. Thanks

[gautammadaan]

@kimiyang After importing the CSS correctly, make sure that each of the inner slides that you want to display are wrapped inside another <div> apart from it's own div.

[matherton]

I am unable to get this working as a component in react - is this even supported in the latest version of React? I have included the css in the component so there are no errors and it just stretches any page I include the component in to be massive with both X and Y scroll bars that go on forever. My advice to anyone looking for a quick carousel implementation in your react project is not waste time using slick-carousel.

[akiran]

@matherton Check this codesandbox https://codesandbox.io/s/ppwkk5l6xx

It is working fine with react 16.5.2

[matherton]

It's ok - I end up writing my own component using blog.alexdevro.com/create-simple-carousel-react-js. I think the way I was exporting my es6 classes is why I could not get the example code to work. Thanks for your response.

[zeel97]

I had the same issue. I imported the following to the index.css file in my project:
@import "~slick-carousel/slick/slick.css";
@import "~slick-carousel/slick/slick-theme.css";

[rahuls360]

npm install slick-carousel --save

import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

Apparently we need to install slick-carousel manually

[guilhermedeoliveira]

I had the same problem, @rahuls360 solution worked.

[lahiruz]

Hi, I'm new to this react. When we do like the way mentioned @rahuls360 , is react only imports the css files?. Because I am wondering when we install slick carousel, will it also ships the slick carousel codebase with my application code?

Please help me to understand this?

[DanielAdek]

Hi guys, I'm having this same issue, and have not figured out on how to get it working. I'm using react version 16.8. Does anyone have an idea on how to get it work on this new version of react?
Thanks in advance!

[voigtd]

npm install slick-carousel --save

import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

Apparently we need to install slick-carousel manually

This should be in the react-slick docs.

[Ashpar2001]

I am unable to get this working as a component in react - is this even supported in the latest version of React? I have included the CSS in the component so there are no errors and it just stretches any page I include the component in to be massive with both X and Y scroll bars that go on forever. My advice to anyone looking for a quick carousel implementation in your react project is not to waste time using slick-carousel.

I am still getting this kind of output. Yes I did npm install react-slick and slick-carousel, yet this is happening ... any help would be really appreciated

[findnizam]

Any one found the solution for this?

[adriandifelice]

Installing slick-carousel and importing it on the component did it for me.