react-material-ui-carousel

react-material-ui-carousel

• github
• demo

Installation

npm install react-material-ui-carousel

yarn add react-material-ui-carousel

Code

import React from 'react';
import Carousel from 'react-material-ui-carousel';
import { Paper, Button } from '@material-ui/core';

function Carousell(props) {
    const items = [
        {
            name: 'Aya Bouchiha',
            description: 'Full Stack Web Developer',
        },
        {
            name: 'John Doe',
            description: 'Author',
        },
        {
            name: 'Pitsu Coma',
            description: 'Math Student',
        },
    ];

    return (
        <Carousel>
            {items.map((item, i) => (
                <Item key={i} {...item} />
            ))}
        </Carousel>
    );
}

const Item = ({name, description}) => {
    return (
        <Paper>
            <h2>{name}</h2>
            <p>{description}</p>
            <Button>more info...</Button>
        </Paper>
    );
};

Have a great day

Comments

[Imad Atyat-Allah]

Thanks @ayabouchiha for this awesome post!

I’ve noticed that the post does not have images or videos to see how the carousel looks, If you can include some images or videos to show how things looks and works this will be really awesome!

[Aya Bouchiha]

My pleasure, There is a demo link above.

[Manohar Reddy Poreddy]

hey, check this once

i expected below

• when i hover any one of the images it must showe the next and prev buttons

actual that i saw was:

• only when i hover to the edges of the left-most and right-most i saw the next & previous buttons