Carousel built with ReactSwipeableViews does not show items

Question

I am trying to implement this carousel using material-ui and react-swipeable-views.

I have a carousel item that looks like this:

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 (<a href={href} style={prepareStyles(carouselItemStyle)}>
                <img src={image}/>
            </a>
        )
    }
}

I have a Carousel component that looks like this:

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 <CarouselItem key={v4()} href="#" image={item}/>
        })
        return (<div style={prepareStyles(style)}>
                <SwipeImplementation>
                    {carouselItems}
                </SwipeImplementation>
            </div>
        )
    }
}

I use the Carousel like this:

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 (
  <Carousel items={items} autoplay={true} />
  )

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.

I have created a webpackbin with the code I get an error in the bin that I do not have in my dev environment.

UPDATE:

If I remove the style for the a tag and change it to a div within CarouselItem:

//style={prepareStyles(carouselItemStyle)}
return (<div><img src={image}/></div>)

The images are displayed but are not full width. I notice that the transform css as well as height are determined using jQuery. How can we establish proper styling for the CarouselItem.

score 0 · Answer 1 · answered Sep 06 '16 at 00:28

I think the problem is with your helloWorld.js. You're not creating the component correctly. Switching it to this is rendering the images for me.

export default class HelloWorld extends React.Component {
  render() {
  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 (
    <MuiThemeProvider>
      <Carousel items={items} autoplay={true}/>
    </MuiThemeProvider>
  );
  }
}

Carousel built with ReactSwipeableViews does not show items

UPDATE:

1 Answers1