Skip to content

Instantly share code, notes, and snippets.

@tc

tc/react-slideshow-demo.html

Created March 18, 2015 21:34
Download ZIP

Revisions

  1. tc created this gist Mar 18, 2015.
    268 changes: 268 additions & 0 deletions react-slideshow-demo.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,268 @@
    <html>
    <head>
    <title>React slideshow test</title>
    <script src="http://fb.me/react-with-addons-0.13.1.js"></script>
    <script src="http://fb.me/JSXTransformer-0.13.1.js"></script>
    <style>
    * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    line-height: 20px;
    font-size: 15px;
    }
    .slideshow {
    }
    .slides {
    display: block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    }
    .slide {
    display: none;
    }
    .slide.slide--active {
    display: block;
    }
    .controls {
    }
    .toggle {
    background: blue;
    color: white;
    display: block;
    padding: 20px;
    position: absolute;
    top: 50%;
    }
    .toggle-prev {
    left: 0;
    }
    .toggle--next {
    right: 0;
    }
    .pagination {
    margin: 20px;
    text-align: center;
    }
    .pager {
    background-color: red;
    display: inline-block;
    height: 20px;
    margin: 10px;
    overflow: hidden;
    text-indent: -9000px;
    white-space: nowrap;
    width: 20px;
    }
    </style>
    </head>
    <body>
    <div id="app"></div>

    <script type="text/jsx">


    function render(state) {
    React.render(
    <Slideshow data={state.data} />,
    document.getElementById('app')
    );
    }
    // State transitions
    var actions = {
    toggleNext: function() {
    console.log("something worked");
    var current = state.currentSlide;
    var next = current + 1;
    if (next > state.data.length - 1) {
    next = 0;
    }
    state.currentSlide = next;
    render(state)
    },
    togglePrev: function() {
    console.log("something worked");
    var current = state.currentSlide;
    var prev = current - 1;
    if (prev < 0) {
    prev = state.data.length - 1;
    }
    state.currentSlide = prev;
    render(state);
    },
    toggleSlide: function(id) {
    console.log("something worked");
    var index = state.data.map(function (el) {
    return (
    el.id
    );
    });
    var currentIndex = index.indexOf(id);
    state.currentSlide = currentIndex;
    render(state);
    }
    }


    var data = [
    {
    id : "slide1",
    imagePath : "http://36.media.tumblr.com/57295bed1b0729b5735bc106de7f31f5/tumblr_nlexmkw3WC1qdkv8qo1_1280.jpg",
    imageAlt : "Slide 1 Image",
    title : "Slide 1",
    subtitle : "Slide 1 Image SubTitle",
    text : "Slide 1 Image Text",
    action : "Slide 1 Image Action",
    actionHref : "href",
    duration : 1000
    },
    {
    id : "slide2",
    imagePath : "https://36.media.tumblr.com/88fa67b7d0116af69ebf4b6957f7b1e4/tumblr_nlfbsh0jK51t5kiyvo1_540.jpg",
    imageAlt : "Slide 2 Image",
    title : "Slide 2",
    subtitle : "Slide 2 Image SubTitle",
    text : "Slide 2 Image Text",
    action : "Slide 2 Image Action",
    actionHref : "href",
    duration : 5000
    },
    {
    id : "slide3",
    imagePath : "https://40.media.tumblr.com/d713c210120841ef53129fe1f43decaf/tumblr_nlfdt21A771sw8fg2o1_540.jpg",
    imageAlt : "Slide 3 Image",
    title : "Slide 3",
    subtitle : "Slide 3 Image SubTitle",
    text : "Slide 3 Image Text",
    action : "Slide 3 Image Action",
    actionHref : "href",
    duration : 10000
    },
    ];



    var Slides = React.createClass({
    render: function() {
    var slidesNodes = this.props.data.map(function (slideNode, index) {
    var isActive = state.currentSlide === index;
    return (
    <Slide active={isActive}
    key={slideNode.id}
    imagePath={slideNode.imagePath}
    imageAlt={slideNode.imageAlt}
    title={slideNode.title}
    subtitle={slideNode.subtitle}
    text={slideNode.text}
    action={slideNode.action}
    actionHref={slideNode.actionHref} />
    );
    });
    return (
    <div className="slides">
    {slidesNodes}
    </div>
    );
    }
    });

    // Single Slide
    var Slide = React.createClass({
    render: function() {
    var classes = React.addons.classSet({
    'slide': true,
    'slide--active': this.props.active
    });
    return (
    <div className={classes}>
    <img src={this.props.imagePath} alt={this.props.imageAlt} />
    <h2>{this.props.title}</h2>
    <h3>{this.props.subtitle}</h3>
    <p>{this.props.text}</p>
    <a href={this.props.actionHref}>{this.props.action}</a>
    </div>
    );
    }
    });


    var Controls = React.createClass({
    togglePrev: function() {
    actions.togglePrev();
    },
    toggleNext: function() {
    actions.toggleNext();
    },
    render: function() {
    return (
    <div className="controls">
    <div className="toggle toggle--prev" onClick={this.togglePrev}>Prev</div>
    <div className="toggle toggle--next" onClick={this.toggleNext}>Next</div>
    </div>
    );
    }
    });

    // Pagination
    var Pagination = React.createClass({
    render: function() {
    var paginationNodes = this.props.data.map(function (paginationNode, index) {
    return (
    <Pager id={paginationNode.id} key={paginationNode.id} title={paginationNode.title} />
    );
    });
    return (
    <div className="pagination">
    {paginationNodes}
    </div>
    );
    }
    });

    var Pager = React.createClass({
    toggleSlide: function() {
    actions.toggleSlide(this.props.id);
    },
    render: function() {
    return (
    <span className="pager" onClick={this.toggleSlide}>{this.props.title}</span>
    );
    }
    });

    var Slideshow = React.createClass({
    render: function() {
    return (
    <div className="slideshow">
    <Slides data={this.props.data} />
    <Pagination data={this.props.data} />
    <Controls />
    </div>
    );
    }
    });

    var state = {
    currentSlide: 0,
    data : data
    };

    var show = function () {
    render(state);
    state.currentSlide = (state.currentSlide + 1) % 3;

    var duration = data[state.currentSlide].duration;
    console.log(duration);
    setTimeout(show, duration);
    }

    var duration = data[state.currentSlide].duration;
    console.log(duration);
    setTimeout(show, duration);

    </script>

    <!-- used https://github.com/marksteve/react-slideshow -->
    </body>
    </html>