Reputation: 747

Responsive Carousel React material-ui

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

Upvotes: 20

Answers (6)

Vivek Mandal

Reputation: 43

I know it's too late but I am also looking for the same thing. I found "react-material-ui-carousel" very helpful and it works as expected. Hope this help.

import { Grid2, Paper, Button } from "@mui/material";
import Carousel from "react-material-ui-carousel";
import banner_1 from "../assets/banner_1.jpg";
import banner_2 from "../assets/banner_2.jpg";
import banner_3 from "../assets/banner_3.jpg";

const MyCarousel = () => {
  const items = [
    {
      name: "Random Name #1",
      description: "Probably the most random thing you have ever seen!",
      bannerImage: banner_1,
    },
    {
      name: "Random Name #2",
      description: "Hello World!",
      bannerImage: banner_2,
    },
    {
      name: "Random Name #3",
      description: "Another banner here!",
      bannerImage: banner_3,
    },
  ];

  return (
    <Carousel autoPlay interval={2000} animation="slide" indicators={false}>
      {items.map((item, index) => (
        <Paper key={index} style={{ textAlign: "center", padding: "10px" }}>
          <img
            src={item.bannerImage}
            alt={item.name}
            style={{ width: "100%", height: "auto" }}
          />
        </Paper>
      ))}
    </Carousel>
  );
};

const Home = () => {
  return (
    <Grid2 container spacing={2} justifyContent="center">
      <Grid2 size={12}>
          <MyCarousel />
      </Grid2>
    </Grid2>
  );
};


export default Home;

Upvotes: 0

CrackerKSR

Reputation: 1926

I have pasted the snippet here. https://gist.github.com/KishorJena/02ba527672d26435998ac226a04fa712

Features:

Responsive
Respects parent width
Swipe to scroll
Scroll to scroll
Drag to scroll
Click left/right buttons to scroll
MUI components
Can be used as vanilla React by replacing some components

Upvotes: 1

Miftah Classifieds

Reputation: 301

if someone still stacked in this, just use this:

npm install react-material-ui-carousel --save
you should install also:
npm install @mui/material
npm install @mui/icons-material
npm install @mui/styles

import Carousel from 'react-material-ui-carousel';

            <Carousel>
                {
                    this.props.item.images.map( (image, i) => <img key={i} src={image} /> )
                }
            </Carousel>

Upvotes: 1

Prakhar

Reputation: 1014

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.

Upvotes: 27

Amin Mohamed

Reputation: 690

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

Upvotes: 8

user2683470

Reputation: 189

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.

Upvotes: 3

Responsive Carousel React material-ui

Answers (6)

Related Questions