Comments (4)
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.
Well, that's exactly what we (and the Material Design Specs) intend this component to be used for. This is not a generic slider for React.
That said, you could try to embed the component by setting mobile
to true
and then adding some styles, like this:
<AutoRotatingCarousel
mobile={true}
style={{ position: 'inherit', width: '50%', height: '50%' }}
>
// your slides
</AutoRotatingCarousel>
from material-auto-rotating-carousel.
Thanks! Is there a way to use CSS style to shrink the length and width of the carousel as well? I want the carousel to be in a small square in the center of the page, and not take up the whole length and width of the page. I have the following code and CSS which I added to the div element around the carousel:
import React from 'react';
import IconButton from 'material-ui/IconButton';
import IconMenu from 'material-ui/IconMenu';
import MenuItem from 'material-ui/MenuItem';
import FlatButton from 'material-ui/FlatButton';
import Toggle from 'material-ui/Toggle';
import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert';
import NavigationClose from 'material-ui/svg-icons/navigation/close';
import Snackbar from 'material-ui/Snackbar';
import { white } from 'material-ui/styles/colors';
import { AutoRotatingCarousel, Slide } from 'material-auto-rotating-carousel'
import { green400, green600, blue400, blue600, red400, red600 } from 'material-ui/styles/colors'
import stylescss from '../styles.css';
export default class Logout extends React.Component {
constructor(props){
super(props);
this.state = {
};
}
render() {
return (
<div className={stylescss['center-page']}>
<AutoRotatingCarousel
label="Get started"
mobile={true}
style={{position: 'inherit', width: '50%', height: '50%'}}
interval={5000}
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>
);
}
}
Where
stylescss['center-page']
is defined to be:
.center-page {
position: absolute;
width: 500px;
height: 10px;
z-index: 15;
top: 50%;
left: 50%;
margin: -100px -100px -100px -150px;
}
I then get an image that looks like this:
Basically, it does not seem like the height attribute is having much effect on the length of the carousel object. Any help is appreciated. Thanks.
from material-auto-rotating-carousel.
@alexanderwhatley That looks like a lot of hacky things. I really think that it would be faster to code your own carousel (feel free to take a look at our code, it's not that hard 😉) than to hack our component to fit your very different requirements.
from material-auto-rotating-carousel.
I'll close this issue for now due to one month of silence. Feel free to open another issue if you have further problems.
from material-auto-rotating-carousel.
Related Issues (20)
- React @^17.0.0 compatibilty ? HOT 4
- [BUG] codesandbox Demo is broken :(
- Is this project abandoned? HOT 1
- how to start in a given index (ex: resume tutorial) HOT 2
- Warning: React does not recognize the `transitionDuration` prop on a DOM element. HOT 4
- Handling images that do not load HOT 1
- React does not recognize the `transitionDuration` prop on a DOM element HOT 1
- Dependency React Swipeable Views Appears to have Changed Directory Structure HOT 1
- [email protected] requires a peer of @material-ui/core@^1.0.0 HOT 1
- hide the lower half in Slide: material-auto-rotating-carousel HOT 2
- unable to use map to generate slides dynamically ? HOT 5
- Title and Subtitle rendering inside Slide HOT 2
- Is it possible to embed a loom video instead of an image in the slide? HOT 3
- Screen width below 600px HOT 1
- Is there any type declaration for this package? How are we supposed to use this in Typescript? HOT 1
- Warning: Received `false` for a non-boolean attribute `mobile`. HOT 5
- Start carousel at specific slide index?
- Scrolling right in mobile view is broken
- Option for no modal? HOT 2
- warning message in console : componentWillMount has been renamed HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from material-auto-rotating-carousel.