tc/react-slideshow-demo.html

## react-slideshow-demo.html
<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>
	<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>