homepage.js

/**
 * @jsx React.DOM
 */
var CampaignSliderItemComponent = React.createClass({
    render: function() {
        return (
            <div className="slide">
                <img src={this.props.image} width="688" height="242" alt="image description" />
                <div className="text">
                    <h2>{this.props.name}</h2>
                    <p>{this.props.description}</p>
                    <p><a className="link" href="#">View THIS cAMPAIGN</a></p>
                </div>
            </div>
        );
    }
});

var CampaignSliderComponent = React.createClass({
    mixins: [ApiMixin, UtilMixin],
    getInitialState: function() {
        return {
            total_records: 0,
            records: []
        };
    },
    componentWillMount: function() {
        $.ajax({
            url: this.generateAPIRoute('campaign'),
            dataType: 'json',
            success: function(response) {
                this.setState({
                    total_records: response.total_records,
                    records: this.maxDisplay(response.records, settings.maxCampaignSlider)
                });
            }.bind(this)
        });
    },
    componentDidMount: function() {
        this.cycleCarousel();
    },
    render: function() {
        var campaignNodes = this.state.records.map(function(campaign) {
            return <CampaignSliderItemComponent name={campaign.name} image={campaign.image} description={campaign.desc} />;
        });
        return (
            <section className="gallery" ref="slider">
                <div className="mask">
                    <div className="slideset">
                        { campaignNodes }
                    </div>
                </div>
                <div className="pagination">
                </div>
            </section>
        );
    },
    cycleCarousel: function() {
        $(this.refs.slider.getDOMNode()).scrollAbsoluteGallery({
            mask: 'div.mask',
            slider: 'div.slideset',
            slides: 'div.slide',
            btnPrev: 'a.btn-prev',
            btnNext: 'a.btn-next',
            generatePagination: '.pagination',
            stretchSlideToMask: true,
            pauseOnHover: true,
            maskAutoSize: true,
            autoRotation: true,
            switchTime: 4000,
            animSpeed: 500
        });
    }
});

React.renderComponent(
    <CampaignSliderComponent />, document.getElementById('campaign_component')
);