DEV Community 👩‍💻👨‍💻

Aya Bouchiha
Aya Bouchiha

Posted on • Updated on




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


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 (
            {, i) => (
                <Item key={i} {...item} />

const Item = ({name, description}) => {
    return (
            <Button>more info...</Button>
Enter fullscreen mode Exit fullscreen mode

Have a great day

Top comments (3)

imadatyat profile image
Imad Atyat-Allah • Edited on

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!

ayabouchiha profile image
Aya Bouchiha Author

My pleasure, There is a demo link above.

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

🤔 Did you know?

✍️ Writing your own article is easy (we even support markdown).