I found an error when import this module
Module not found: Can't resolve 'react-material-ui-carousel' in '../src/component'

import React from 'react';
import Carousel from 'react-material-ui-carousel';
import { Paper, Button } from '@material-ui/core';

Thank you for incoming response

Love this plugin!

wondering how to do trigger a change slide event on press of one of the indicator buttons. I know there's a next prev trigger on the arrow buttons on the side, which fires a next and prev event on the carousel but is there any way to get one on the indicator dots? Either A. IF you are using your default carousel dots or B. If you came up with your own custom dots

Firstly, great job. It's been hard to find something suits my needs, I'm really liking what I see.

My only issue is that on each slide transition, the card being removed is hidden abruptly, and the background is shown as the next card slides or fades into view.

Would it be possible to animate the current card away?

Again, great job.

Hello there,
in the documentation there is some talk about the "timeout" prop but upon checking your code the timeout prop for fade and slide is hardcoded to 500 and 200 ms respectively which is a bit too aggressive.
Best regards

I'm using the carousel for a dynamic array of children that can be grown and individual children deleted. The carousel doesn't work as I would expect if I delete the last child of the array. I would prefer if it either circled back to the first child, or to the prev child. Right now it doesn't select anything and you need to manually select from the button bar.

I'm using the slider and set theautoPlay to true and the animation to slide and when sliding the images it makes the vertical scroll for a second and disappear but that unwanted behavior, so I figure it out and I found that the carousel needs for backface-visibility to set for hidden, so for that I'll make a pull request to solve this issue , you can assign this issue to me

For a second, the x-scroll appears on the slide animation. Is there a way around this?

I've used this a few hours ago with nextjs and I couldn't get the paper without putting return like this. So I would like to inform this for your references. Thank you. Also would like to say that this library is super cool.

<Carousel animation="slide">
        {items.map((item, key) => {
          return (
            <div key={key}>
              <Item item={item} />
            </div>
          );
        })}
      </Carousel>

Is it possible to render a row of 4 elements and when the carousel slides the first element goes to the end of the list and the element that is in the 5th position occupies the 4th?

Hi, thank you for this awesome library !

I'm trying to install your package with yarn.
Is it even possible ? It might be a beginner misunderstanding from me.

It works with npm, but with yarn it seems to hit a network issue :

[2/4] Fetching packages...
info There appears to be trouble with your network connection. Retrying...

I tried to remove the package with yarn and everything worked again.

What I did :

yarn add react-material-ui-carousel

network issue

npm install react-material-ui-carousel

then

yarn

network issue

I also tried this :

    yarn config delete proxy
    npm config rm proxy
    npm config rm https-proxy

I shouldn't mess with two packages managers, NPM seems to remove dependencies from my project's
packages to do his sauce, and I prefer yarn as I'm more experienced with it.
Any clue or tips about this ?

Thank you ! :)

In the current version, the index.d.ts is incorrectly defined.

    indicatorProps: {className: string, style: React.CSSProperties},
    activeIndicatorProps: {className: string, style: React.CSSProperties},

Those should be nullable it seems. With Typescript, it is complaining if you don't define those.

Is this intentional?

for all that have the same error with
Unable to eliminate 'Each child in a list should have a unique "key" prop' warning.

will fix it:

<Carousel>
  {
          items.map(item => <React.Fragment key={item.id}><Item item={item} /></React.Fragment>)
        }
</Carousel>

yarn list @material-ui/styles when i was add material-ui/core, and rsult in :

├─ @material-ui/[email protected]
├─ @react-material-ui-carrusel
│ └─ @material-ui/[email protected]

If there's a way to set indexState via a dropdown select that I could pass to as props, that would be awesome

I can see that you are calling the sanitizeProps function every time you need the props , why not save it in a global const variable the first time, or in the state object.

Hi. First great library its working near perfect for me. Here is the carousel I built

<Carousel
    animation="slide"
    autoPlay={true}
    interval={9000}
>
     {items.map(test => (
         <Banner item={test} />
      ))}        
</Carousel>

My data is loading fine in the banner my problem is I want the interval between pages once the carousel is already loaded to be different than the time it takes for the carousel to load on to the page.

So When a user opens my page it takes a full 9 seconds for the carousel to load which is a problem since I do want there to be a 9 second interval from the slide effect. Is there anyway I can get the carousel to load instantly but still keep my 9 second interval time?

Note: Even if I get rid of the interval the carousel still does not load immediately it only loads when I press the button I would like so it no button is needed to press.

Thank you

When i put the carousel at the top of the page then scroll all the way down it scrolls back to the top of the page after each image change the carousel makes.

Assuming there is an array of data to display, I really want to specify the first data to come up on the carousel. For instance, if I click on a particular image, I want it to be the first Item to come up before other images, simply put it should be the first index to show. React-bootstrap carousel has this functionality. I really like the how next and prev icon on hover that this exhibits but had to suspend it for now due to the index set back. Thanks and looking forward to having a reply very soon Sir.

I am trying to get the sample up an running and it turns out the scss file with the demo doesn't seem to parse right. Rather than go down the rabbit hole of figuring out what the problem is, would it be possible to get the equivalent CSS file? I just want to get the demo up and running. The scss file goes with this sample . This is the specific file.

This is cool.

Any chance we could get a license added to the repo? I understand it is intended to be MIT.

When you don't use CRA, need set the transpile of webpack to work.

Wanted to hide nav buttons forever even from hover or any class or css based config there?
I dont want to show them any ways..

I wanted to do some conditional rendering on the page outside of this component, based on the current item active in the carousel - i.e, update their state based on carousel next/previous item transitions. Couldn't see anything like this in the code - is this something you'd consider merging if I submitted a PR for it? Sounds fairly trivial, but might need your input on what data you'd like passed to the callback function (...assuming you want this implemented at all...!)

I clone the project and tried to reproduce.. But I have the error:

Could not find a required file.
Name: index.html
Searched in: D:\CARPETA_DE_JOSE\PROYECTOS_JAVASCRIPT\react-material-ui-carousel\public

Firstly, your component is very nice and easy to use.
Maybe you can add more properties to make it more custom such as time of animation. Or I can do for you.

Is there a way to hide the left/right nav buttons like you can hide the indicators?

I did get around this by accessing it through the classes on Carousel, just thought it would be a nice add on.

The reason I needed this is similar to your first example where the left/right nav buttons are covering up a button within the carousel.

I am sending different photos [] arrays to my carousel component which vary in data and length but only the initial length sets the carousel indicators after that it doesn't vary depending on the new length of the array. Please help!!

is this right? <Carousel
className={classes.slide}
animation={"slide"}
navButtonsAlwaysVisible={true} > //is this line right? the navButtonsAlwaysVisible is not working on my project. Apart from this this carousel is the best material ui carousel i have seen so far. nice one bro
{data.map(event => )}

Originally posted by @gakin95 in #57 (comment)

I basically converted the Example app to TypeScript:

import React, { FC } from 'react';
import { navigate } from 'gatsby';
import Carousel from "react-material-ui-carousel"
import autoBind from "auto-bind"
import { CarouselItem } from './CarouselItem';
import '../../assets/scss/carouselbanner.scss';

import {
    Card,
    CardContent,
    CardMedia,
    Typography,
    Grid,
    Button,
} from '@material-ui/core';
import { number } from 'prop-types';

type BannerProps = {
    onClick: (event) => void;
    banneritem: CarouselItem;
    length?: number;
    contentPosition: 'left' | 'right' | 'middle';
};
const Banner:FC<BannerProps> = ({onClick, banneritem, length = 3, contentPosition}) => {
    const totalItems = length;
    const mediaLength = totalItems - 1;

    let items = [];
    const content = (
        <Grid item xs={12 / totalItems} key="content">
            <CardContent className="Content">
                <Typography className="Title">
                    {banneritem.Name}
                </Typography>

                <Typography className="Caption">
                    {banneritem.Caption}
                </Typography>

                <Button onClick={(e) => onClick(e)} variant="outlined" className="ViewButton">
                    Start Now
                </Button>
            </CardContent>
        </Grid>
    )


    for (let i = 0; i < mediaLength; i++) {
        const sideitem = banneritem.Items[i];

        const media = (
            <Grid item xs={12 / totalItems} key={sideitem.Name}>
                <CardMedia
                    className="Media"
                    image={sideitem.Image}
                    title={sideitem.Name}
                >
                    <Typography className="MediaCaption">
                        {sideitem.Name}
                    </Typography>
                </CardMedia>

            </Grid>
        )

        items.push(media);
    }

    if (contentPosition === "left") {
        items.unshift(content);
    } else if (contentPosition === "right") {
        items.push(content);
    } else if (contentPosition === "middle") {
        items.splice(items.length / 2, 0, content);
    }

    return (
        <Card raised className="Banner">
            <Grid container spacing={0} className="BannerGrid">
                {/* {items} */}
            </Grid>
        </Card>
    )
}
type CarouselBannerProps = {
    items: CarouselItem[]
};
type CarouselBannerState = {
    autoPlay: boolean;
    timer: number;
    animation: 'fade' | 'slide' | undefined;
    indicators: boolean;
    timeout: number;
    navButtonsAlwaysVisible: boolean;
    navButtonsAlwaysInvisible: boolean;
}

class CarouselBanner extends React.Component<CarouselBannerProps, CarouselBannerState> {
    constructor(props: CarouselBannerProps) {
        super(props);

        this.state = {
            autoPlay: true,
            timer: 500,
            animation: 'fade',
            indicators: true,
            timeout: 500,
            navButtonsAlwaysVisible: false,
            navButtonsAlwaysInvisible: false
        }

        autoBind(this);
    }

    toggleAutoPlay() {
        this.setState({
            autoPlay: !this.state.autoPlay
        })
    }

    toggleIndicators() {
        this.setState({
            indicators: !this.state.indicators
        })
    }

    toggleNavButtonsAlwaysVisible()
    {
        this.setState({
            navButtonsAlwaysVisible: !this.state.navButtonsAlwaysVisible
        })
    }

    toggleNavButtonsAlwaysInvisible()
    {
        this.setState({
            navButtonsAlwaysInvisible: !this.state.navButtonsAlwaysInvisible
        })
    }

    changeAnimation(event) {
        this.setState({
            animation: event.target.value
        })
    }

    changeTimeout(event, value: number) {
        this.setState({
            timeout: value
        })
    }

    onClickStart(event) {
        navigate('/public/gettingstarted');
    }

    render() {
        return (
            <div style={{marginTop: "50px", color: "#494949"}}>
                <Carousel
                    className="Example"
                    autoPlay={this.state.autoPlay}
                    animation={this.state.animation}
                    indicators={this.state.indicators}
                    timeout={this.state.timeout}
                    navButtonsAlwaysVisible={this.state.navButtonsAlwaysVisible}
                    navButtonsAlwaysInvisible={this.state.navButtonsAlwaysInvisible}
                >
                    {
                        this.props.items && this.props.items.map((item, index) => {
                            return <Banner onClick={this.onClickStart} banneritem={item} key={index} contentPosition={item.contentPosition}/>
                        })
                    }
                </Carousel>
            </div>
        )
    }
}
 
export default CarouselBanner;

But now it I don't see anything. I can go back to normal JSX but I would rather not. Can you see how TypeScript would cause it to fail. NOTE: There are no errors on the console. Just no display.

Problem

Using <Carousel> and Material UI at the same time causes styles to clash, breaking Material UI

Sample

Without <Carousel> rendered in app

With <Carousel> rendered in app.

How to reproduce

npx create-react-app my-app
cd my-app
npm start

Add the following to package.json

   "@material-ui/core": "4.10.2",
    "react-material-ui-carousel": "1.6.0",

Modify App.js

import React from 'react';
import './App.css';
import Button from "@material-ui/core/Button";
import Carousel from "react-material-ui-carousel";
import Box from "@material-ui/core/Box";

function App() {
  return (
    <div >
      <Box p={5} >
        <Button variant="contained" color="primary" type="submit">
          Submit
        </Button>
        <Carousel>
          <div key={1}>item 1</div>
          <div key={2}>item 2</div>
        </Carousel>

      </Box>
    </div>
  );
}

export default App;

yarn install & yarn start Start the app and observe the clashing styles on .MuiButtonBase-root and etc...

Possible Fix

Move Material ui and icons to peer dependencies. See mui/material-ui#15610 (comment)

i.e.

"devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "gh-pages": "^2.2.0",
    "@material-ui/core": "^4.10.2",
    "@material-ui/icons": "^4.9.1"
  },
  "peerDependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "@material-ui/core": "^4.10.2",
    "@material-ui/icons": "^4.9.1"
  }

Every once and a while. I am assuming when I unmount the carousel during a repaint. I get the following warning message:

index.js:1 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in Carousel (created by WithStyles(Carousel))
    in WithStyles(Carousel) (at CarouselBanner.jsx:197)
    in div (at CarouselBanner.jsx:196)
    in CarouselBanner (created by Context.Consumer)
    in withRouter(CarouselBanner) (at Dashboard.js:6)
    in Dashboard (created by Context.Consumer)
    in Route (at Public.js:27)

Maybe there needs to be some cleanup when the component unmounts?

In your demo I don't see a way to add a background image to each slide

Error says

.Carousel {
  ^
  SyntaxError: Unexpected token .

What should i do, please help.

Hello,

thanks for this nice library. I think visually it would make sense if the slide direction is reverted if "prev" is triggered. Currently the slide is always to left, but if you swipe backwards I think to right might be little bit more consistent.

Taken from the examples I have a react component that implements a CarouselBanner. This seems to work fine as long I am running locally but when I go to bundle it up for production via 'yarn build' (which triggers gatsby build) my gatsby build throws the error

failed Building static HTML for pages - 16.475s

 ERROR #95313 

Building static HTML failed for path "/dashboard/"

See our docs page for more info on this error: https://gatsby.dev/debug-html


  332 |                 indicators ? _react2.default.createElement(Indicators, {
  333 |                     classes: classes,
> 334 |                     length: this.props.children.length,        
      | ^
  335 |                     active: this.state.active,
  336 |                     press: this.pressIndicator,
  337 |                     indicatorProps: this.props.indicatorProps, 


  WebpackError: TypeError: Cannot read property 'length' of undefined  

  - Carousel.js:334 
    node_modules/react-material-ui-carousel/dist/components/Carousel.js    :334:1

Notice that the error is coming from node_modules which this component. Right?

I'm having this problem trying to run my project including this plugin:

 ERROR in ./node_modules/react-material-ui-carousel/dist/style/Carousel.scss 3:16
    Module parse failed: Unexpected token (3:16)
    You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
    | $grey: rgb(175, 175, 175);
    | $graphite: rgb(73, 73, 73);
    > $small-font-size: 15px;
    | $big-header-font-size: 30px;
    | 
     @ ./node_modules/react-material-ui-carousel/dist/components/Carousel.js 31:0-33
     @ ./node_modules/react-material-ui-carousel/dist/index.js
     @ ./src/components/Elements/HomePage/modules/views/HomePageSection.js
     @ ./src/components/Pages/HomePage.js
     @ ./src/index.js
     @ multi babel-polyfill ./src/index.js
    Child html-webpack-plugin for "index.html":
         1 asset
        Entrypoint undefined = index.html
        [0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html 1.19 KiB {0} [built]
        [2] (webpack)/buildin/global.js 472 bytes {0} [built]
        [3] (webpack)/buildin/module.js 497 bytes {0} [built]
            + 1 hidden module
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build: `webpack --mode production && npm run copy:assets`
npm ERR! Exit status 2

What's the problem here?

The navButtons icons arent correct (180deg rotated) in RTL mode, how to solve it? should I add a css style for that?

Hi, This is a great work, well done.

Please how do you make the eBay™ style example, I need to make something like that, But the documentation isn't clear on how to.
Could you please give some hints.

Regards

is there a way we can customize the indicators container?

Hi, I'm using your brilliant component with a dark them and want to override the colors of the indicators. It would be great to have a classes prop that would allow extra styles to be merged into/over the default styles.

Thanks again for this learus!

I was dealing with the problem of not being able to style the "active" dot, because it only has a classes.active class name, which gets changed by mui on build and ends up being unpredictable. it would be great to give devs access to a static, pure css class name on the active indicator dot, for purposes of styling the active indicator (since consumers don't have access to the indicators as elements in the component, and since mui changes the "active" class name when it gets compiled to jssXXX".

Not sure but I think react-scripts should go to devDependencies, shouldn't it? Otherwise npm installs a whole bunch of packages on your consumers machines they probably don't need (~100MB).

Thanks for the carousel - is there a way to customize the nav buttons and bottom buttons? I know it takes a className prop but I cant get this to style the buttons.

yo @Learus , Im trying to build my app but i got this error. Im using latest version of react-material-ui-carousel(1.6.0), auto-bind(2.1.1). Any idea?

Creating an optimized production build...
Failed to compile.

Failed to minify the code from this file:

./node_modules/react-material-ui-carousel/node_modules/auto-bind/index.js:4

Read more here: http://bit.ly/2tRViJ9

Hi there
Are there any plans to fix this in future updates?

Reference: https://fb.me/react-strict-mode-find-node

Great package!
Cheers

hi, I'm using this project with typescript, and I think the Typescript interface CarouselProps has a required prop that should be optional.

The member in question is indicatorContainerProps - none of the examples provided have this member set, and the code works when making the field optional.

Here's the CodeSandbox, using c-r-a w/ typescript. https://codesandbox.io/s/kind-matsumoto-tt16n

you can see that there's a typescript compiler error when you hover over the <Carousel> tag on line 52 in App.tsx but the page is still functional and the Carousel works as-expected.

Let me know if this is as intended and I can throw in a fix to the typing (just making indicatorContainerProps optional) or whatever fits you :)