MUI Carousel not displaying properly

user_7206191 0
Viewed 678

I'm trying to make a Carousel that works with MUI components which the one I found is this one react-material-ui-carousel, but for some reason is not working properly (or maybe as usual I'm doing something wrong)

So this is what I have (and it works)

import React from 'react'
import Carousel from 'react-material-ui-carousel'
import { Card } from '@mui/material'
import CardMedia from '@mui/material/CardMedia';
import CityA from "./Images/CityA.jpg"
import CityB from "./Images/CityB.jpg"

function Item(props)
{
    return (
        <Card sx={{ width: "50%"}}>
          <CardMedia
        component="img"
        height="25%"
        image={props.item.img}
      />
        </Card>
    )
}

function Home() {

  var items = [
    {
        img: CityA
    },
    {
      img: CityB
    }
  ]

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

export default Home

This is the output of that code alone:

enter image description here

As you can see the it is working all good however if I try to add it as a part of my "Route" it breaks horribly

import React, { useEffect, useState } from "react";
import {BrowserRouter as Router, Routes, Route } from "react-router-dom"
import Header from "./Header";
import Home from "./Home";

function App() {
  return (
    < div className="app" >
    <Router>
        <Routes>

          <Route path = "/" element={<Header/>}>
            <Route path = "/" element = {<Home/>} />
          </Route>
          
        </Routes>
    </Router>
  </div >
  );
}

export default App;

it then looks like this:

enter image description here

Super Small! even with 500% Zoom! like what just happened! any help/tip or even other method is welcome all I wanted to do was an image carousel :c

Working demo here -> Demo

What I would like to achieve ->

enter image description here

carousel material-ui reactjs javascript
1 Answers

Don't set the size of the element on the element itself, set the size of the container of that element.

For example:

<OuterBox sx={{display: "flex", justifyContent: "center", flexGrow: 1}}>
   <InnerBox sx={{ width: "50%"}}>
      <ContainedElement />
   </InnerBox>
</OuterBox>

This will give you a horizontally centered element and you can resize the InnerBox to change the size of the element. The inner box takes up 50% of the space of the outer box and your contained element takes up 100% of that space

Also your routes are strange you wrote:

<Route path = "/" element={<Header/>}>
   <Route path = "/" element = {<Home/>} />
</Route>

but that means your default path is going to two different elements. I would try:

<Route path="/header" element={<Header />} />
<Route path="/" element={<Home />} />

Also for the Carousel:

function Item(props) {

   return (
   <Box sx={{display: "flex", justifyContent: "center">
     <Card width: "50%">
        <CardMedia
          component="img"
          image={props.item.img}
        />
     </Card>
   </Box>
  )
}

function Home() {
   var items = [
    {
      img: CityA
    },
    {
      img: CityB
    }
  ]

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


}

That should work but I'm not sure about the original size of the images. Hope that helps.

user_195125830
Related