xxxxxxxxxx
{
indicators: {
width: "100%",
marginTop: "10px",
textAlign: "center"
},
indicator: {
cursor: "pointer",
transition: "200ms",
padding: 0,
color: "#afafaf",
'&:hover': {
color: "#1f1f1f"
},
'&:active': {
color: "#1f1f1f"
}
},
indicatorIcon: {
fontSize: "15px",
},
// Applies to the active indicator
active: {
color: "#494949"
}
}
xxxxxxxxxx
import React from 'react';
import { Carousel } from '@mui/material';
const CarouselExample = () => {
const items = [
{ image: 'image_1.jpg', caption: 'First Image' },
{ image: 'image_2.jpg', caption: 'Second Image' },
{ image: 'image_3.jpg', caption: 'Third Image' },
// ... add more items as needed
];
return (
<Carousel>
{items.map((item, index) => (
<CarouselItem key={index} item={item} />
))}
</Carousel>
);
}
const CarouselItem = ({ item }) => {
return (
<div>
<img src={item.image} alt={item.caption} />
<p>{item.caption}</p>
</div>
);
}
export default CarouselExample;
xxxxxxxxxx
import React from 'react';
import Carousel from 'react-material-ui-carousel'
import { Paper, Button } from '@mui/material'
function Example(props)
{
var items = [
{
name: "Random Name #1",
description: "Probably the most random thing you have ever seen!"
},
{
name: "Random Name #2",
description: "Hello World!"
}
]
return (
<Carousel>
{
items.map( (item, i) => <Item key={i} item={item} /> )
}
</Carousel>
)
}
function Item(props)
{
return (
<Paper>
<h2>{props.item.name}</h2>
<p>{props.item.description}</p>
<Button className="CheckButton">
Check it out!
</Button>
</Paper>
)
}
xxxxxxxxxx
import React, { useEffect } from "react";
import { CssBaseline } from "@material-ui/core";
import { Switch, Route } from "react-router-dom";
import HomePage from "./Homepage/homepage";
import SearchPage from "./searchpage/browse";
import Footer from "./components/footer";
import Ereader from "./components/reader/ereader";
import Mybooks from "./mybooks/mybooks";
import Abar from "./components/Appbar/appbar";
const App = () => {
useEffect(() => {}, []);
return (
<React.Fragment>
<CssBaseline />
<Abar />
<main>
<Switch>
<Route exact path="/" render={(props) => <HomePage {props} />} />
<Route exact path="/browse" render={(props) => <SearchPage />} />
<Route
exact
path="/read"
render={(props) => <Ereader {props} />}
/>
<Route exact path="/mybooks" render={(props) => <Mybooks />} />
</Switch>
</main>
<Footer />
</React.Fragment>
);
};
export default App;
============================================
or use this link for more details.
https://codesandbox.io/s/0l29m?file=/src/App.js:0-1023
https://github.com/Learus/react-material-ui-carousel
xxxxxxxxxx
import RandomIcon from '@@mui/icons-material/Random'; // Note: this doesn't exist
<Carousel
NextIcon={<RandomIcon/>}
PrevIcon={<RandomIcon/>}
// OR
NextIcon={<img src="http://random.com/next"/>}
PrevIcon={<img src="http://random.com/prev"/>}
>
{ }
</Carousel>