Giter Club home page Giter Club logo

Comments (4)

leMaik avatar leMaik commented on August 15, 2024

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.

alexanderwhatley avatar alexanderwhatley commented on August 15, 2024

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:

image

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.

leMaik avatar leMaik commented on August 15, 2024

@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.

saschb2b avatar saschb2b commented on August 15, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.