Responsive Carousel React material-ui

Question

I am trying to build a music tour website using React material-ui. I woul like the website to look like this one: https://www.oddfantastic.com/

I am new to React and after looking to libraries such as bootstrap and material-ui and decided to stick to material-ui. Right now I'm stuck on the first page with the sliding images. I tried different ways to obtain the result of the first page of the above website but no luck until now. I started using grid and cards, and now I am trying grid list. Here is my code:

import Slide from '@material-ui/core/Slide';
import React, { Component } from 'react'
import { Grid, Card, CardContent, CardMedia, Typography } from '@material-ui/core';
import GridList from '@material-ui/core/GridList';
import GridListTile from '@material-ui/core/GridListTile';
import { Carousel, CarouselSlide } from 'material-ui-carousel'

export default class App extends Component {
pictures = [
    {imagel: './images/radio7-2-1.png', imager: './images/radio7-2-2.png', title: 'r7-2'},
    {imagel: './images/radio7-3-1.png', imager: './images/radio7-3-2.png', title: 'r7-3'},
    {imagel: './images/masterphil-1.png', imager: './images/masterphil-2.png', title: 'mp'},
    {imagel: './images/vito-1.png', imager: './images/vito-2.png', title: 'vito'},
  ];

render () {
    return (
// <Grid container justify="center" spacing={0}>
  /* {[0, 1].map(value => (
    <Grid key={value} item> */
      <Carousel>
        {this.pictures.map(({ imagel, imager, title }) => (
        <CarouselSlide key={title}>
           <GridList cellHeight={160} cols={2}>
             <GridListTile key={title} style={{ height: 'auto' }}>
               <img src={imagel} alt={title} />
             </GridListTile>
           </GridList>
          {/* <Card width="100%" key={title}>
            <CardMedia
              image={imagel}
              title={title}
              style={{
              height: 0,
              width: '50%',
              paddingTop: '75%',
              }}
            />
            <CardMedia
              image={imager}
              title={title}
              style={{
              height: 0,
              width: '50%',
              paddingTop: '75%',
              }}
            />
            <CardContent>
              <Typography>{title}</Typography>
            </CardContent>
          </Card> */}
        </CarouselSlide>
        ))}
      </Carousel>

    /* </Grid>
  ))}
</Grid> */

)
}
}

Here is the obtained result:

It looks like all the images appear at the same time.

Since my knowledge is really really limited, I am wondering if I chose the right library. Especially that I couldn't find a material-ui component allowing to achieve what I want.

Any advice or direction would be great. Thanks

Answer 1

I think you are looking for this package which is an extendible Carousel UI component using Material-UI. Happy Coding!

Answer 2

The MUI official doc consists of an example of using Carousel Effect.

The example can be found here

The demo uses react-swipeable-views to create a carousel.

Answer 3

Material UI doesn’t have a native Carousel component btw and I find Material UI customization very challenging for beginners. After trying many carousel libraries recently, I found the ant design has the best ready-to-use carousel. The library is developed and maintained by Alibaba group, so you can rely on it better than some small libraries.