Introduce users to your app with this Material-style carousel.

Home Page: https://mui.wertarbyte.com/#material-auto-rotating-carousel

License: MIT License

JavaScript 100.00%

material-ui react material-design carousel material

material-auto-rotating-carousel's Introduction

Material AutoRotatingCarousel

So you wrote a great app and deployed it and everything. But how do you introduce new users to your app? Well, the Material design guidelines have a solution: Displaying the top benefits in a beautiful auto-rotating carousel!

This project implements such a carousel for Material-UI. Visit the styleguide for an interactive demo.

Installation

npm i --save material-auto-rotating-carousel
npm i --save react-swipeable-views

Note: This is the version for Material-UI 1.0.0 or later. If you are using Material-UI 1.0.0-beta, you should update to the latest version. If you are still using Material-UI 0.x, you can use our legacy version.

AutoRotatingCarousel Properties

Name	Type	Default	Description
autoplay	`bool`	`true`	If `false`, the auto play behavior is disabled.
ButtonProps	`object`		Properties applied to the Button element.
classes	`object`		Object for customizing the CSS classes.
containerStyle	`object`		Override the inline-styles of the carousel container.
hideArrows	`function`		If `true`, the left and right arrows are hidden in the desktop version.
interval	`integer`	`3000`	Delay between auto play transitions (in ms).
label	`string`		Button text. If not supplied, the button will be hidden.
landscape	`bool`		If `true`, slide will adjust content for wide mobile screens.
mobile	`bool`	`false`	If `true`, the screen width and height is filled.
ModalProps	`object`		Properties applied to the Modal element.
open	`bool`	`false`	Controls whether the AutoRotatingCarousel is opened or not.
onChange	`function`		Fired when the index changed. Returns current index.
onClose	`function`		Fired when the gray background of the popup is pressed when it is open.
onStart	`function`		Fired when the user clicks the getting started button.

Slide Properties

Name	Type	Description
classes	`object`	Object for customizing the CSS classes.
landscape	`bool`	If `true`, slide will adjust content for wide mobile screens (automatically set by `AutoRotatingCarousel`).
media*	`node`	Object to display in the upper half.
mediaBackgroundStyle	`object`	Override the inline-styles of the media container.
mobile	`bool`	If `true`, the screen width and height is filled (automatically set by `AutoRotatingCarousel`).
style	`object`	Override the inline-styles of the slide.
subtitle*	`string`	Subtitle for the slide.
title*	`string`	Title for the slide.

* required property

Example

License

The files included in this repository are licensed under the MIT license.

material-auto-rotating-carousel's People

Contributors

Stargazers

Watchers

Forkers

pengyanb crecket whowit gonmedtara sgfswen manbali mikesten mkram eks1985 asktrim leebailey88 addjam workfinder mirocody chaitan94 hzsamir balazsorban44 fadeenk galiminus krishnakumar01-zz porterk trendingtechnology safouman emir-kobaslic mohsinriaz17 skirunman galliumsoft gambinish dcrysler leroyg urantialife stefpb ziedhamdi cingisiznazli oliverjevans aheissenberger stevephuc raymaen estelle111 superstark02 nadjarben udaysubbisetty yilinjuang thirdave qbdumont fadlikadnmitrais masterdev593 weisk lakshitpaliwal marceloadsj velox-softech aberba ayushsharma-crypto ramrajepooja tmbtech mikkopori tkdevlop seyi anasbalkhadir sadathetoure roncodingenthusiast code-ayush captain-slow andrewjhart arturserd1uk mgsinicropi randy5478 johnforrest alexandreagostinho chuckdog janacm gihanrangana salehshouri adamchenwei sito8943 onepercentio invensogroup markoff20k fortem-financial realblocks-official luisabellan artur-serdiuk

material-auto-rotating-carousel's Issues

autoplay false setting on the AutoRotatingCarousel is not working

Tried to use the carousel with autoplay=false but it doesn't seem to work.
I've setup a small demo on this URL.
https://codesandbox.io/s/xrv093486o

Swipe left and right is not updating dotes view

Swipe left and right on mobile not updating dots and not notifying onChange(position)

How to override inline CSS?

Hi, Could you please help me on below issue.
I am facing issue in inline CSS style which is added dynamically below is the code for reference:

(
width:60%; 
max-width:700px; 
height:calc(100% - 96px); 
max-height:600px; 
margin:-16px auto 0;
position:relative;
top:50%; 
transform:translateY(-50%);
)

Thanks in Advance.

Can we modify the left/right button?

Thank you for your awesome work! But I want to modify the styles of the button, or even remove the button. Could you please make them as optional, or let dev could modify their style?

Keyboard navigation

This feature would almost be free and pretty useful for users that expect to have keyboard navigation, especially on the desktop.

Single slide not permitted

It return an error:
children.map is not a function

Allow customizing the style of the button

Need ability to theme the button via setting style.
http://www.material-ui.com/#/components/raised-button

how to start in a given index (ex: resume tutorial)

Hi,

I'm new to js, I would like to open the caroussel in a selected slideIndex. Looking to the code, it seams quite complex (probably to be compatible with older syntax???) for ex:

var AutoRotatingCarousel = function (_Component) {
  _inherits(AutoRotatingCarousel, _Component);
...}(_react.Component);

instead of
class AutoRotatingCarousel extends React.Component {} ???

Anyway, my problem is elsewhere : I'd like to pass slideIndex as a property and it seams I have to fork the project to be able to do it. Am I right? or is there a way I wasn't able to read from the code?

Thanks for the great library, I really appreciate it
Best regards

Error

How to override unnecessary styling

Why the title and subtitle are necessary in the first place? If I don't pass'em as props, still the unnecessary gap is there. Can not select the classes to remove that unnecessary gap, as the class names are created dynamically.

If we added className as a prop to the Slide component, actual class (which is gonna generate dynamically) is not added, only className coming from the prop is shown, hence the styling difference is there than the original one!

How to remove the unnecessary gap between the image and the bullets of carousel?
Always better to add styling using classes though!

with title and subtitle:

w/o title and subtitle:

Warning: React does not recognize the `transitionDuration` prop on a DOM element.

When using the demo code in a new react project the following error appears in the console.

No adverse effects of this warning, the carousel still works as expected.

Test repo: https://github.com/OliverJEvans/material-auto-rotating-carousel-issue

Versions
@material-ui/[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]

Error

Warning: React does not recognize the `transitionDuration` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `transitionduration` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in div (created by ForwardRef(SimpleBackdrop))
    in ForwardRef(SimpleBackdrop) (created by ForwardRef(Modal))
    in div (created by ForwardRef(Modal))
    in ForwardRef(Portal) (created by ForwardRef(Modal))
    in ForwardRef(Modal) (created by AutoRotatingCarousel)
    in AutoRotatingCarousel (created by WithStyles(AutoRotatingCarousel))
    in WithStyles(AutoRotatingCarousel) (at App.js:9)
    in div (at App.js:8)
    in App (at src/index.js:5)

App.js

import React from 'react';
import { AutoRotatingCarousel, Slide } from 'material-auto-rotating-carousel';
import { red, blue, green } from '@material-ui/core/colors';


function App() {
  return (
    <div style={{ position: 'relative', width: '100%', height: 500 }}>
      <AutoRotatingCarousel
        label='Get started'
        open
        style={{ position: 'absolute' }}
      >
        <Slide
          media={<img src='http://www.icons101.com/icon_png/size_256/id_79394/youtube.png' />}
          mediaBackgroundStyle={{ backgroundColor: red[400] }}
          style={{ backgroundColor: red[600] }}
          title='This is a very cool feature'
          subtitle='Just using this will blow your mind.'
        />
        <Slide
          media={<img src='http://www.icons101.com/icon_png/size_256/id_80975/GoogleInbox.png' />}
          mediaBackgroundStyle={{ backgroundColor: blue[400] }}
          style={{ backgroundColor: blue[600] }}
          title='Ever wanted to be popular?'
          subtitle='Well just mix two colors and your are good to go!'
        />
        <Slide
          media={<img src='http://www.icons101.com/icon_png/size_256/id_76704/Google_Settings.png' />}
          mediaBackgroundStyle={{ backgroundColor: green[400] }}
          style={{ backgroundColor: green[600] }}
          title='May the force be with you'
          subtitle='The Force is a metaphysical and ubiquitous power in the Star Wars fictional universe.'
        />
      </AutoRotatingCarousel>
    </div>
  );
}

export default App;

Fast forwarding when switching back to browser tab

browser: chrome 74.0.3729.131

symptom and steps to reproduce:

open a page in a tab with autoplay rotating carousel (use default interval - 3000 ms)
switch to a different tab and take a break for about 10 seconds
switch back to the tab in step 1, you will see slides fast forwarding and eventually it slows down to the correct interval

what's expected:

slides in the autoplay carousel rotates exactly every interval milliseconds in call cases.

Show more than one and horizontally scrollable

A horizontally scrollable carousel would be nice. Showing more than one tile at the same time. And still can navigate left and right.

Error

Doesn't fit in portrait mode iOS Safari

When a site or web app using a <AutoRotatingCarousel> is viewed through Safari iOS, held in portrait orientation, the <Slide>s bleed out of the edges of the screen. Most significantly, the call to action button at the bottom becomes obscured by Safari's footer.

When the same site/app is launched from the home screen, or (I assume) in a WebView in a native/hybrid app, then the carousel fills a portrait aspect screen nicely. These methods of launching/displaying an app prevent Safari's header/footer appearing.

Exposing Dots as a standalone component

Hi there,

Would it be possible to expose the Dots component as its own component, potentially with its own repo?

There are circumstances where i'm developing a carousel which doesn't fit into the Top User Benefits design which this component adheres to, so using this component outright isn't possible.

I'm creating my own view using react-swipeable-views as you have, and it would be fantastic to reuse the Dots component you have as it looks excellent!

Component should behave like a carousel

At the moment, the jump from the last to the first card (and vice versa) looks strange and doesn't match the specs.
It should swipe to the left/right, but never jump over multiple cards.

Also, it should be possible to get from the first to the last card by swiping to the right, and to get from the last to the first card by swiping to the left.

ContainerStyle is hardcoded

This forces the carousel to take over the entire window. It will be nice to be able to overwrite this style. I am not sure if there is a way to do so and I am just blanking out on it.

material-auto-rotating-carousel/src/AutoRotatingCarousel.js

Line 160 in 5640e00

containerStyle={{ height: '100%' }}

Error

Warning: Unknown props `mobile`, `landscape` on <div> tag.

Got the following while embedded the AutoRotatingCarousel into my component.

warning.js:35 Warning: Unknown props `mobile`, `landscape` on <div> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop

If I move the code from line 180-183 the warning disappeared.

              {this.props.children.map((c, i) => React.cloneElement(c, {
                mobile: this.props.mobile,
                landscape: this.props.landscape,
                key: i
              }))}

Support for material-ui@^0.18

npm WARN [email protected] requires a peer of material-ui@^0.17.4 but none was installed.

Can I still use this if I'm running material-ui 0.18?

Issue with material-ui paths

Hi,

The material paths changed I think e.g. colors are in material-ui/colors excluding /styles

Installing I got the following errors:

These dependencies were not found:

material-ui/RaisedButton in ./~/material-auto-rotating-carousel/lib/AutoRotatingCarousel.js
material-ui/styles/colors in ./~~/material-auto-rotating-carousel/lib/AutoRotatingCarousel.js, ./~~/material-auto-rotating-carousel/lib/Slide.js
material-ui/svg-icons/navigation/arrow-back in ./~/material-auto-rotating-carousel/lib/AutoRotatingCarousel.js
material-ui/svg-icons/navigation/arrow-forward in ./~/material-auto-rotating-carousel/lib/AutoRotatingCarousel.js

To install them, you can run: npm install --save material-ui/RaisedButton material-ui/styles/colors material-ui/svg-icons/navigation/arrow-back material-ui/svg-icons/navigation/arrow-forward

Error

hide the lower half in Slide: material-auto-rotating-carousel

Is there any way to hide the lower half of the slide (the part down to image)

<Slide
     media={<img src='http://www.icons101.com/icon_png/size_256/id_76704/Google_Settings.png'/>}
     title='5 May the force be with you'
     subtitle='The Force is a metaphysical and ubiquitous power in the Star Wars fictional universe.'
   />

here I tried to comment 'title' and 'subtitle' but that doesn't work as I want

Button style cannot be overriden

The button by default is a RaisedButton and it cannot be changed for a FlatButton; neither can its styles be changed (for instance I need to say primary={true}). It would be great if the button could either be a child prop of its own, so the user can pass in their own button, or there is a buttonStyle prop that can be passed to it.

Incorrect number of slide count being rendered

I have configured for 3 slides. But the the number of slides gets doubled ie to 6. Is there a prop property by which i can disable this?

is there an after change handler?

that gets called when the the index of carousel changes?

Incorrect order of slides - Mobile

I have 5 slides. On desktop works good, but in mobile I've found two bugs (only when autoplay=false):

The dots doesn't move (only the first dot is lighted)
The slides are disordered. It renders like: Slide 3, Slide 4, Slide 5, Slide 1, Slide 2, Slide 3 (but the first to render is the number 1)

Did you have the same problem?
Thanks in advance

Is there a way to embed the carousel into the page?

Is there a way to embed the carousel into the page itself? Right now, when I display it, the carousel takes up the center part of the page, and the gray area surrounding it blocks the rest of the webpage. I have tried adding CSS and style to the div element surrounding it such as:

			<div style = {{width: '50%', height: '50%'}}>
				<AutoRotatingCarousel
					label="Get started"
					open
				>
					<Slide
						media={<img src="http://www.icons101.com/icon_png/size_256/id_79394/youtube.png" />}
						mediaBackgroundStyle={{ backgroundColor: red400 }}
						contentStyle={{ backgroundColor: red600 }}
						title="This is a very cool feature"
						subtitle="Just using this will blow your mind."
					/>
					<Slide
						media={<img src="http://www.icons101.com/icon_png/size_256/id_80975/GoogleInbox.png" />}
						mediaBackgroundStyle={{ backgroundColor: blue400 }}
						contentStyle={{ backgroundColor: blue600 }}
						title="Ever wanted to be popular?"
						subtitle="Well just mix two colors and your are good to go!"
					/>
					<Slide
						media={<img src="http://www.icons101.com/icon_png/size_256/id_76704/Google_Settings.png" />}
						mediaBackgroundStyle={{ backgroundColor: green400 }}
						contentStyle={{ backgroundColor: green600 }}
						title="May the force be with you"
						subtitle="The Force is a metaphysical and ubiquitous power in the Star Wars universe."
					/>
				</AutoRotatingCarousel>
			</div>

However, this does not change anything. Thanks for your help.

material-ui deprecation of 'raised' variant

I'm getting this warning using material-ui 3.5.1

index.js:1452 Warning: Failed prop type: The raised variant will be removed in the next major release. contained is equivalent and should be used instead.
in Button (created by WithStyles(Button))
in WithStyles(Button) (created by AutoRotatingCarousel)
in div (created by AutoRotatingCarousel)
in div (created by AutoRotatingCarousel)
in div (created by AutoRotatingCarousel)
in Transition (created by Fade)
in Fade (created by WithTheme(Fade))
in WithTheme(Fade) (created by AutoRotatingCarousel)
in RootRef (created by Modal)
in div (created by Modal)
in Portal (created by Modal)
in Modal (created by WithStyles(Modal))
in WithStyles(Modal) (created by AutoRotatingCarousel)
in AutoRotatingCarousel (created by WithStyles(AutoRotatingCarousel))
in WithStyles(AutoRotatingCarousel) (at Welcome.js:153)

Add more buttons

hi, i need add more buttons on bottom, where display an button default.

Port to material-ui 1.0.0-beta

So, im getting
Module not found: Can't resolve 'material-ui/svg-icons/navigation/arrow-back' in 'C:\Users\Pedro\tt\node_modules\material-auto-rotating-carousel\lib'

I'm using material-ui last version, should i use a previous one?

How do you add a callToAction to the label(button) or is there a way to remove the button?

HI,
I have experimented in different ways, but couldn't find any solutions, Is there a way to add a call to action to the button or simply remove it?

Thankyou

Error

Error from Sample code

Hello I got the following error while playing with the sample code in ReadMe file:

warning.js:36 Warning: Failed context type: The context `muiTheme` is marked as required in `Paper`, but its value is `undefined`.
    in Paper (created by AutoRotatingCarousel)
    in div (created by AutoRotatingCarousel)
    in div (created by AutoRotatingCarousel)
    in AutoRotatingCarousel (created by DemoCarousel)
    in div (created by DemoCarousel)
    in DemoCarousel (created by HomePage)
    in div (created by HomePage)
    in HomePage (created by RouterContext)
    in div (created by App)
    in App (created by RouterContext)

Paper.js:101 Uncaught TypeError: Cannot read property 'prepareStyles' of undefined
    at Paper.render (Paper.js:101)
    at ReactCompositeComponent.js:796
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:795)
    at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:822)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:362)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactDOMComponent.mountChildren (ReactMultiChild.js:238)
    at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:697)

Anyone also met this problem?

Error

[email protected] requires a peer of @material-ui/core@^1.0.0

Every time I run an NPM action I get the warning

npm WARN [email protected] requires a peer of @material-ui/core@^1.0.0 but none is installed. You must install peer dependencies yourself.

But this package calls for "@material-ui/core": "^4.3.2". Is there any way to resolve this?

React does not recognize the `transitionDuration` prop on a DOM element

Hi,

I have this error by simply using the lib

Warning: React does not recognize the `transitionDuration` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `transitionduration` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in div (created by ForwardRef(SimpleBackdrop))
    in ForwardRef(SimpleBackdrop) (created by ForwardRef(Modal))
    in div (created by ForwardRef(Modal))
    in ForwardRef(Portal) (created by ForwardRef(Modal))
    in ForwardRef(Modal) (created by AutoRotatingCarousel)
    in AutoRotatingCarousel (created by WithStyles(AutoRotatingCarousel))
    in WithStyles(AutoRotatingCarousel) (created by Query)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by Query)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by Query)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by Query)
    in Query (created by IssueDetail)
    in IssueDetail (created by withRouter(IssueDetail))
    in withRouter(IssueDetail) (created by withI18nextTranslation(withRouter(IssueDetail)))
    in withI18nextTranslation(withRouter(IssueDetail)) (created by WithStyles(withI18nextTranslation(withRouter(IssueDetail))))
    in WithStyles(withI18nextTranslation(withRouter(IssueDetail))) (created by Context.Consumer)
    in ApolloConsumer (created by withApollo(WithStyles(withI18nextTranslation(withRouter(IssueDetail)))))
    in withApollo(WithStyles(withI18nextTranslation(withRouter(IssueDetail)))) (created by ComplaintListView)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by ComplaintListView)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by Transition)
    in Transition (created by ForwardRef(Zoom))
    in ForwardRef(Zoom) (created by ComplaintListView)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by ComplaintListView)
    in div (created by ComplaintListView)
    in ComplaintListView (created by withRouter(ComplaintListView))
    in withRouter(ComplaintListView) (created by WithStyles(withRouter(ComplaintListView)))
    in WithStyles(withRouter(ComplaintListView)) (created by IssueHome)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by IssueHome)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by IssueHome)
    in IssueHome (created by withRouter(IssueHome))
    in withRouter(IssueHome) (created by WithStyles(withRouter(IssueHome)))
    in WithStyles(withRouter(IssueHome)) (created by Context.Consumer)
    in ApolloConsumer (created by withApollo(WithStyles(withRouter(IssueHome))))
    in withApollo(WithStyles(withRouter(IssueHome))) (created by Detail)
    in div (created by Query)
    in HiddenJs (created by WithWidth(HiddenJs))
    in WithWidth(HiddenJs) (created by Hidden)
    in Hidden (created by Query)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by Query)
    in Query (created by SidePanelsInnerLayout)
    in SidePanelsInnerLayout (created by withRouter(SidePanelsInnerLayout))
    in withRouter(SidePanelsInnerLayout) (created by withI18nextTranslation(withRouter(SidePanelsInnerLayout)))
    in withI18nextTranslation(withRouter(SidePanelsInnerLayout)) (created by WithStyles(withI18nextTranslation(withRouter(SidePanelsInnerLayout))))
    in WithStyles(withI18nextTranslation(withRouter(SidePanelsInnerLayout))) (created by Context.Consumer)
    in ApolloConsumer (created by withApollo(WithStyles(withI18nextTranslation(withRouter(SidePanelsInnerLayout)))))
    in withApollo(WithStyles(withI18nextTranslation(withRouter(SidePanelsInnerLayout)))) (created by Detail)
    in div (created by Query)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by Query)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by Query)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by Query)
    in Query (created by ClientLayout)
    in ClientLayout (created by withI18nextTranslation(ClientLayout))
    in withI18nextTranslation(ClientLayout) (created by WithStyles(withI18nextTranslation(ClientLayout)))
    in WithStyles(withI18nextTranslation(ClientLayout)) (created by Context.Consumer)
    in ApolloConsumer (created by withApollo(WithStyles(withI18nextTranslation(ClientLayout))))
    in withApollo(WithStyles(withI18nextTranslation(ClientLayout))) (created by Detail)
    in Detail (created by withRouter(Detail))
    in withRouter(Detail) (created by WithStyles(withRouter(Detail)))
    in WithStyles(withRouter(Detail)) (created by Context.Consumer)
    in ApolloConsumer (created by withApollo(WithStyles(withRouter(Detail))))
    in withApollo(WithStyles(withRouter(Detail))) (created by MyApp)
    in ApolloProvider (created by MyApp)
    in ThemeProvider (created by MyApp)
    in Container (created by MyApp)
    in MyApp (created by withI18nextSSR(MyApp))
    in withI18nextSSR(MyApp) (created by AppWithTranslation)
    in NextStaticProvider (created by withI18nextTranslation(NextStaticProvider))
    in withI18nextTranslation(NextStaticProvider) (created by AppWithTranslation)
    in I18nextProvider (created by AppWithTranslation)
    in AppWithTranslation (created by withRouter(AppWithTranslation))
    in withRouter(AppWithTranslation) (created by withApollo(App))
    in withApollo(App)
    in Suspense
console.<computed> @ main.js?ts=1572350145762:11751
r @ backend.js:6
warningWithoutStack @ react-dom.development.js:506
warning @ react-dom.development.js:2628
validateProperty$1 @ react-dom.development.js:7319
warnUnknownProperties @ react-dom.development.js:7360
validateProperties$2 @ react-dom.development.js:7380
validatePropertiesInDevelopment @ react-dom.development.js:7431
setInitialProperties @ react-dom.development.js:7691
finalizeInitialChildren @ react-dom.development.js:8755
completeWork @ react-dom.development.js:16907
completeUnitOfWork @ react-dom.development.js:19142
performUnitOfWork @ react-dom.development.js:19340
workLoop @ react-dom.development.js:19352
renderRoot @ react-dom.development.js:19435
performWorkOnRoot @ react-dom.development.js:20342
performWork @ react-dom.development.js:20254
performSyncWork @ react-dom.development.js:20228
interactiveUpdates$1 @ react-dom.development.js:20495
interactiveUpdates @ react-dom.development.js:2170
dispatchInteractiveEvent @ react-dom.development.js:4882

Raised Button is not in material-ui's library

Can't resolve 'material-ui/RaisedButton' from node_modules\material-auto-rotating-carousel\lib'

I tried importing { Button } from 'material-ui' on AutoRotatingCarousel.js instead of { RaisedButton } but still get the same error that it can't resolve material-ui/RaisedButton.

Handling images that do not load

How do you handle when images don't get loaded for any reason?

react-medium-image-zoom provides an onError prop where we can load a placeholder image or something.

Thank you for the library!

Dependency React Swipeable Views Appears to have Changed Directory Structure

A reproduction can be found here in the example that was never merged into the README.

https://codesandbox.io/s/mystifying-varahamihira-dphsr?fontsize=14

It appears that react-swipeable-views may have changed the directory structure in version 13.4, that causes material-auto-rotating-carousel to not compile.

I believe the issue sits within the SwipableCarouselView.js file between lines 2-4.
https://github.com/TeamWertarbyte/material-auto-rotating-carousel/blob/master/src/SwipableCarouselView.js#L2-L4

Downgrading to version 13.3 seemed to fix the issue.

The full error is:

[ error ] ./node_modules/material-auto-rotating-carousel/lib/SwipableCarouselView.js
Module not found: Can't resolve 'react-swipeable-views-utils/lib/autoPlay' in '/Users/asciant/Projects/crimson/node_modules/material-auto-rotating-carousel/lib'
{ Error: Cannot find module 'react-swipeable-views-utils/lib/autoPlay'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/Users/asciant/Projects/crimson/node_modules/material-auto-rotating-carousel/lib/SwipableCarouselView.js:15:17)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/Users/asciant/Projects/crimson/node_modules/material-auto-rotating-carousel/lib/AutoRotatingCarousel.js:67:29)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/Users/asciant/Projects/crimson/node_modules/material-auto-rotating-carousel/lib/index.js:7:29)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.material-auto-rotating-carousel (/Users/asciant/Projects/crimson/.next/server/static/development/pages/detail.js:10997:18)
    at __webpack_require__ (/Users/asciant/Projects/crimson/.next/server/static/development/pages/detail.js:29:31)
    at Module../components/Detail/Carousel.jsx (/Users/asciant/Projects/crimson/.next/server/static/development/pages/detail.js:2785:89)
    at __webpack_require__ (/Users/asciant/Projects/crimson/.next/server/static/development/pages/detail.js:29:31)
    at Module../components/Detail/Images.jsx (/Users/asciant/Projects/crimson/.next/server/static/development/pages/detail.js:3606:67)
    at __webpack_require__ (/Users/asciant/Projects/crimson/.next/server/static/development/pages/detail.js:29:31)
    at Module../components/Detail/index.jsx (/Users/asciant/Projects/crimson/.next/server/static/development/pages/detail.js:4448:65)
    at __webpack_require__ (/Users/asciant/Projects/crimson/.next/server/static/development/pages/detail.js:29:31)
    at Module../pages/detail.jsx (/Users/asciant/Projects/crimson/.next/server/static/development/pages/detail.js:10057:76)
    at __webpack_require__ (/Users/asciant/Projects/crimson/.next/server/static/development/pages/detail.js:29:31)
    at Object.3 (/Users/asciant/Projects/crimson/.next/server/static/development/pages/detail.js:10138:18)
    at __webpack_require__ (/Users/asciant/Projects/crimson/.next/server/static/development/pages/detail.js:29:31)
    at /Users/asciant/Projects/crimson/.next/server/static/development/pages/detail.js:124:18
    at Object.<anonymous> (/Users/asciant/Projects/crimson/.next/server/static/development/pages/detail.js:127:10)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.requirePage (/Users/asciant/Projects/crimson/node_modules/next/dist/next-server/server/require.js:47:12) code: 'MODULE_NOT_FOUND' }

Error

Desktop style isn't responsive

Setting the mobile option is not an option in a non-touch environment, so the desktop component should scale better. 😄

Open slides by clicking the small dots

Is there a way to add back the clickable arrow keys when the mobile prop is set to true? I want the edge-to-edge carousel but also want users to click between slides, not just use their arrow keys.

Minimal option?

It is possible to use this carousel library with very minimal options, i.e. the slide being only a single image with no text or buttons? I still want to show the dots, use the auto-rotate functionality and plug into the event handlers, but I can't find an easy way to render my carousel without buttons and text on the slides. Is this supported?

Error

TypeError: Cannot read property 'length' of undefined

Hello ! I try to implement a carousel inside a mui project but your are broken so i open this ticket for you !

node_modules/material-auto-rotating-carousel/lib/AutoRotatingCarousel.js:315

  312 |   enter: _transitions.duration.enteringScreen,
  313 |   exit: _transitions.duration.leavingScreen
  314 | };
> 315 | var hasMultipleChildren = children.length != null;
      | ^  316 | 
  317 | var carousel = _react2.default.createElement(_SwipableCarouselView2.default, {
  318 |   autoplay: open && autoplay && hasMultipleChildren,

that the error message throw by react when i try to implement your component.

rtl support

when I change the direction to rtl it breaks this carousel. Would you be able to fix this?

teamwertarbyte / material-auto-rotating-carousel Goto Github PK

material-auto-rotating-carousel's Introduction

Material AutoRotatingCarousel

Installation

AutoRotatingCarousel Properties

Slide Properties

Example

License

material-auto-rotating-carousel's People

Contributors

Stargazers

Watchers

Forkers

material-auto-rotating-carousel's Issues

Recommend Projects

Recommend Topics

Recommend Org