title: Carousel built with ReactSwipeableViews does not show items
body: <p>I am trying to implement <a href="http://materializecss.com/carousel.html" rel="nofollow noreferrer">this carousel</a> using <code>material-ui</code> and <code>react-swipeable-views</code>.</p>
  <p>I have a carousel item that looks like this:</p>
  <pre><code>import React, {Component, PropTypes} from 'react'
  
  export default class CarouselItem extends Component {
      
      static contextTypes = {
          muiTheme: PropTypes.object.isRequired
      }
  
      static defaultProps = {
          href:'#'
      }
  
      constructor(props) {
          super(props)
      }
  
      render() {
          const carouselItemStyle = {
              width:'100%',
              height:'100%',
              minHeight:'400px',
              position:'absolute',
              top:0,
              left:0,
              zIndex:-1,
              opacity:1,
              display:'block'
          }
  
          const {prepareStyles} = this.context.muiTheme
          const {href,image} = this.props
  
          debugger
          return (&lt;a href={href} style={prepareStyles(carouselItemStyle)}&gt;
                  &lt;img src={image}/&gt;
              &lt;/a&gt;
          )
      }
  }
  </code></pre>
  <p>I have a Carousel component that looks like this:</p>
  <pre><code>import React, {Component, PropTypes} from 'react'
  import {v4} from 'node-uuid'
  import CarouselItem from './CarouselItem'
  import autoPlay from 'react-swipeable-views/lib/autoPlay'
  import SwipeableViews from 'react-swipeable-views'
  
  const AutoplaySwipeableViews = autoPlay(SwipeableViews)
  
  export default class Carousel extends Component {
      
      static contextTypes = {
          muiTheme: PropTypes.object.isRequired
      }
  
      static propTypes = {
          items:PropTypes.arrayOf(PropTypes.string),
          autoplay:PropTypes.bool
      }
  
      static defaultProps = {
          autoplay:false
      }
  
  
      constructor(props) {
          super(props)
      }
  
      render() {
          
          const carousel = {
              overflow:'hidden',
              position:'relative',
              width:'100%',
              perspective:'500px',
              transformStyle:'preserve-3d',
              transformOrigin:'0% 50%'
          }
  
          const carouselSlider = {
              top:0,
              left:0,
              height:0
          }
  
          const {style:customStyles} = this.props
  
          const style = Object.assign(
              carousel,
              carouselSlider,
              customStyles
          )
  
          const {prepareStyles} = this.context.muiTheme
          const SwipeImplementation = this.props.autoplay?AutoplaySwipeableViews:SwipeableViews
          debugger
          const carouselItems = this.props.items.map(function(item){
              debugger
              return &lt;CarouselItem key={v4()} href=&quot;#&quot; image={item}/&gt;
          })
          return (&lt;div style={prepareStyles(style)}&gt;
                  &lt;SwipeImplementation&gt;
                      {carouselItems}
                  &lt;/SwipeImplementation&gt;
              &lt;/div&gt;
          )
      }
  }
  </code></pre>
  <p>I use the <code>Carousel</code> like this:</p>
  <pre><code>const items = [
      'http://estruct.com.au/wp-content/uploads/2014/10/old-gccc-logo.png',
      'http://www.activehealthycommunities.com.au/wp-content/uploads/2014/07/City-of_Gold-Coast_stacked_CMYK-01.jpg'
    ]
    return (
    &lt;Carousel items={items} autoplay={true} /&gt;
    )
  </code></pre>
  <p>I find that the carousel items do not appear, when I look in the developer tools, I find that transitions are happening but I do not see the items.</p>
  <p>I have created a <a href="http://www.webpackbin.com/NyGoHJPiW" rel="nofollow noreferrer">webpackbin with the code</a>
  I get an error in the bin that I do not have in my dev environment.</p>
  <h1>UPDATE:</h1>
  <p>If I remove the style for the <code>a</code> tag and change it to a <code>div</code> within <code>CarouselItem</code>:</p>
  <pre><code>//style={prepareStyles(carouselItemStyle)}
  return (&lt;div&gt;&lt;img src={image}/&gt;&lt;/div&gt;)
  </code></pre>
  <p>The images are displayed but are not full width. I notice that the <code>transform</code> css as well as <code>height</code> are determined using <code>jQuery</code>. How can we establish proper styling for the <code>CarouselItem</code>.</p>