I don’t know what I’m doing wrong, but though the images load the vertical calculations are not executed, and none of the eventHandlers or effects. Where is domReady supposed to go, or how best do you run that jQuery carousel object only once? Here’s what my code looks like:
import React from 'react';
import classNames from 'classnames';
import { createContainer } from 'meteor/react-meteor-data';
import { Stories } from '../../api/Collections.js';
class Home extends React.Component {
// The component is updated */
componentDidMount(prevProps, prevState) {
$( document ).ready(function(){
// Homepage
$('.carousel.carousel-slider').carousel({full_width: true});
});
// update
}
render(){
// Here we go
if( !this.props.isReady ){
return(<div></div>);
// if
} else {
// Add the featured
var featured = [];
// Loop through carousel items
for(i=0;i<2;i=i+1) featured.push(<a className="carousel-item" href="#" key={i}><img src="http://lorempixel.com/800/400/food/1"/></a>);
// Send it home
return (
<div className="carousel carousel-slider">
<a className="carousel-item" href="#one!"><img src="http://lorempixel.com/800/400/food/1"/></a>
<a className="carousel-item" href="#two!"><img src="http://lorempixel.com/800/400/food/2"/></a>
<a className="carousel-item" href="#three!"><img src="http://lorempixel.com/800/400/food/3"/></a>
<a className="carousel-item" href="#four!"><img src="http://lorempixel.com/800/400/food/4"/></a>
</div>
);
}
}
}
export default HomeController = createContainer(() => {
var handle = Meteor.subscribe('stories');
return {
isReady: handle.ready(),
featured: Stories.find().fetch(),
stories: Stories.find().fetch()
};
}, Home);
//export default Home;