How to setup carousal in react js?

Report
Question

Please briefly explain why you feel this question should be reported .

Report
Cancel

Hi,

I want a carousal slider in my React Js projects. I am beginner in React , Please suggest.

Thanks in advanced.

solved 0
Deepak 5 months 4 Answers 232 views Beginner 0

Answers ( 4 )

  1. Please briefly explain why you feel this answer should be reported .

    Report
    Cancel

    Installing as a package
    npm install react-responsive-carousel --save
    Usage

    import React, { Component } from ‘react’;
    import ReactDOM from ‘react-dom’;
    import { Carousel } from ‘react-responsive-carousel’;
     
    class DemoCarousel extends Component {
        render() {
            return (
                <Carousel>
                    <div>
                        <img src=”assets/1.jpeg” />
                        <p className=”legend”>Legend 1</p>
                    </div>
                    <div>
                        <img src=”assets/2.jpeg” />
                        <p className=”legend”>Legend 2</p>
                    </div>
                    <div>
                        <img src=”assets/3.jpeg” />
                        <p className=”legend”>Legend 3</p>
                    </div>
                </Carousel>
            );
        }
    });
     
    ReactDOM.render(<DemoCarousel />, document.querySelector(‘.demo-carousel’));
     
    // Don’t forget to include the css in your page
     
    // Using webpack
    // import styles from ‘react-responsive-carousel/lib/styles/carousel.min.css’;
     
    // Using html tag:
    // <link rel=”stylesheet” href=”<NODE_MODULES_FOLDER>/react-responsive-carousel/lib/styles/carousel.min.css”/

    Best answer
  2. Please briefly explain why you feel this answer should be reported .

    Report
    Cancel
  3. Please briefly explain why you feel this answer should be reported .

    Report
    Cancel

    Thanks Rahul, It works for me and i setuop the same carousal in my React Js project. Thanks for your help.

  4. Please briefly explain why you feel this answer should be reported .

    Report
    Cancel

    Thanks Andrew , i’ll also try your answer. Thanks for replying.

Leave an answer