CODEWITHSUNDEEP
reactjscarousel
abu abu
abu abu

Reputation: 7052

Carousel in React.js

I am trying to implement this tutorial. My code is like below

import makeCarousel from 'react-reveal/makeCarousel';
import Slide from 'react-reveal/Slide';
import styled, { css } from 'styled-components';


export default class Slider extends Component {
  Container = styled.div`
    border: 1px solid red;
    position: relative;
    overflow: hidden;
    width: 300px;
    height: 150px;
  `;
 CarouselUI = ({ children }) => <Container>{children}</Container>;
 Carousel = makeCarousel(CarouselUI);

render (
    <Carousel defaultWait={1000} /*wait for 1000 milliseconds*/ >
      <Slide right>
        <div>
          <h1>Slide 1</h1>
          <p>Slide Description</p>
        </div>
      </Slide>
      <Slide right>
        <div>
          <h1>Slide 2</h1>
          <p>Slide Description</p>
        </div>
      </Slide>
    </Carousel>
  );
}

I am getting error like below

enter image description here

Upvotes: 2

Views: 1100

Answers (3)

JLD
JLD

Reputation: 570

you forgot to write return. Also the render function needs () after it.

render() {
return (
    <Carousel defaultWait={1000} /*wait for 1000 milliseconds*/ >
      <Slide right>
        <div>
          <h1>Slide 1</h1>
          <p>Slide Description</p>
        </div>
      </Slide>
      <Slide right>
        <div>
          <h1>Slide 2</h1>
          <p>Slide Description</p>
        </div>
      </Slide>
    </Carousel>
  );
}

Upvotes: 2

Faktor 10
Faktor 10

Reputation: 1888

You seem to be missing some code, also need to move some lines around. It is unfortunate the tutorial misses some code and makes it seem like everything is inside your default exported class.

you need the line import React from 'react' at the top of your file, it needs to be in every React component.

Also The Component composition lines, which inject your styles etc, need to be moved outside of your exported class. Also they need to be defined, i.e. use const.

 const Container = styled.div`...`
 const CarouselUI = ({ children }) => <Container>{children}</Container>;
 const Carousel = makeCarousel(CarouselUI);

and then also missing a return statement in render function. Remember its a function of the class Slider, so you also need the () after.

See a codesandbox which works - https://codesandbox.io/s/agitated-browser-foxsb?fontsize=14&hidenavigation=1&theme=dark

Upvotes: 0

Aravind
Aravind

Reputation: 169

you have to install: npm install react-responsive-carousel

for more information about Carousel follow the below link: Link:https://www.npmjs.com/package/react-responsive-carousel

and more over you forget to write render{ return(...... ) }

Upvotes: -1

Related Questions