DEV Community

Aya Bouchiha
Aya Bouchiha

Posted on • Updated on

react-material-ui-carousel

react-material-ui-carousel

Installation

npm install react-material-ui-carousel
Enter fullscreen mode Exit fullscreen mode
yarn add react-material-ui-carousel
Enter fullscreen mode Exit fullscreen mode

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>
    );
};
Enter fullscreen mode Exit fullscreen mode

Have a great day

Discussion (3)

Collapse
imadatyat profile image
imad • Edited

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!

Collapse
ayabouchiha profile image
Aya Bouchiha Author

My pleasure, There is a demo link above.

Collapse
manoharreddyporeddy profile image
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