React-slick: React-slick doesn't slide

Created on 1 Jun 2018 · 6Comments · Source: akiran/react-slick

Hey guys, i am trying to make react slick to work but it doesn't slide.
I havent installed JQuery.We use Server Side Rendering and we want to avoid using JQuery.
Is it necessary to install JQuery or there is another way.

I use react version 16.4.0
I installed react-slick with npm. version 0.23.1.
I install slick-carousel with npm. version 1.8.1
I added external css files from cdn for the styles.
I copy pasted a simple example from the page and it doesn't slide.

Source

iCantWriteCode

All 6 comments

Can you show us your settings object?

blwsh on 1 Jun 2018

import React from 'react';
import Slider from 'react-slick';
import { Container, Row, Col } from 'reactstrap';
import Map from './images/map.svg';

class mapSection extends React.Component {
  render() {
    const settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1,
    };
    return (
      <Container className="py-6">
        <h2 className="text-center mb-5">Aegeana is available in the following locations:</h2>
        <Row>
          <Col>
            <img src={Map} className="img-fluid" alt="" />
          </Col>
          <Col>
            <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>
          </Col>
        </Row>
      </Container>
    );
  }
}


export default mapSection;

my code looks like this

iCantWriteCode on 4 Jun 2018

Hmm, that all looks good.

To answer your question: "Is it necessary to install JQuery or there is another way."
No it's not. I have a reactql project and like you I'm using server side rendering and pulled the css from the CDN without requiring jQuery so it should work for you too.

Sorry I couldn't help you fix your problem.

blwsh on 4 Jun 2018

@iCantWriteCode please include a sandbox, such as: https://codesandbox.io/s/k98w7v4r43