CODEWITHSUNDEEP
cssreactjs
Himanshu Gera
Himanshu Gera

Reputation: 189

React Slick not working

I'm new to slick, react, and react-slick and I have made a new component using react-slick. When I implemented the responsive carousel and CSS (and even before that) the elements are stacked vertically as you can see in this image. Any help would be appreciated.

Upvotes: 6

Views: 24277

Answers (8)

Arul Benito
Arul Benito

Reputation: 129

Container div width did the trick for me

.slider-container { display: inline-block; width:500px }

Upvotes: 1

Hamza Iqbal
Hamza Iqbal

Reputation: 37

I was facing the same issue and resolved it by adding below stylesheets in index.html head tag:

<link rel="stylesheet" type="text/css" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />

Upvotes: 0

Jakub Śliwiński
Jakub Śliwiński

Reputation: 11

Putting Slider in a div helped in my case.

<div>
<Slider>
</Slider>
</div>

Upvotes: 1

Mehadi Hassan
Mehadi Hassan

Reputation: 1240

Please make sure you are importing below in your js or jsx file:-

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

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

Please update your Jsx like below:-

<div className="slider-container">
<Slider {...settings}>
            <div><img src='http://placekitten.com/g/400/200' /></div>
          <div><img src='http://placekitten.com/g/400/200' /></div>
          <div><img src='http://placekitten.com/g/400/200' /></div>
          <div><img src='http://placekitten.com/g/400/200' /></div>
        </Slider>

</div>

Add Css below:-

.slider-container {
  display: inline-block;
}

Upvotes: 2

Juanma Menendez
Juanma Menendez

Reputation: 20229

A few things to have into consideration:

1- Be sure to install and import the proper files

npm install react-slick --save
npm install slick-carousel


// Import the Component and the css files in your MyComponent.jsx file
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

Note: If you are using Typescript probably you will need to install the @types too:

npm install @types/react-slick --save

2- Remember you don't have to add flex or anything like that to the father container because the library already situates the elements itself, so if you have a container with flex remove it.

3- Be sure to pass the proper setting to the Component, especially the slidesToShow: x

eg:

const settings = {
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 4,
        slidesToScroll: 1
    };

    <Slider {...settings}>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </Slider>

Upvotes: 8

Harita Ravindranath
Harita Ravindranath

Reputation: 470

Refer to the official doc for correct installation here: https://react-slick.neostack.com/docs/get-started

Make sure you have completed the following steps:

  1. Install dependencies: 
    yarn add react-slick
yarn add slick-carousel
  2. Import CSS 
    @import "~slick-carousel/slick/slick.css"; 
@import "~slick-carousel/slick/slick-theme.css";

Upvotes: 7

Armen Asaduryan
Armen Asaduryan

Reputation: 324

try to connect css files

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

or

<link rel="stylesheet" type="text/css" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />

and after it you can overwrite usig classes

Upvotes: 7

ChaosPredictor
ChaosPredictor

Reputation: 4091

It's better to add you code... Anyway here is an example of React Slick:

html:

<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

js:

var ReactSlickDemo = React.createClass({
  render: function() {
    var settings = {
        dots: true
    }
    return (
        <div className='container'>
        <Slider {...settings}>
            <div><img src='http://placekitten.com/g/400/200' /></div>
          <div><img src='http://placekitten.com/g/400/200' /></div>
          <div><img src='http://placekitten.com/g/400/200' /></div>
          <div><img src='http://placekitten.com/g/400/200' /></div>
        </Slider>
      </div>
    );
  }
});

ReactDOM.render(
  <ReactSlickDemo />,
  document.getElementById('container')
);

css:

.container {
  margin: 0 auto;
  padding: 40px;
  width: 80%;
  color: #333;
  background: #419be0;
}

from here

Upvotes: 3

Related Questions