JSFiddle - React, Tailwind, and code Playground

by Ali Khaled

HTML

<script src="http://cdn.jsdelivr.net/mithril/0.1.21/mithril.min.js"></script>
<script src="http://cdn.jsdelivr.net/velocity/1.0.0/velocity.min.js"></script>

CSS

.pics {
	position: relative;
	width: 100%;
	height: 100vh;
	border:1px solid black;
	overflow: hidden;
}
.pic {
	position: absolute;
	width: 100%;
	height: 100%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

JavaScript

//model
var cats = [
	"http://placekitten.com/g/200/300",
	"http://placekitten.com/g/400/800",
	"http://placekitten.com/g/300/300",
	"http://placekitten.com/g/400/300",
	"http://placekitten.com/g/800/400",
	"http://placekitten.com/g/200/200",
	"http://placekitten.com/g/300/200",
	"http://placekitten.com/g/400/200",
	"http://placekitten.com/g/200/400",
	"http://placekitten.com/g/300/400",
	"http://placekitten.com/g/400/400",
]

var model = {
	path: m.prop(''),
	files: m.prop(cats),
	activeThumb: m.prop(0),
	activePic: m.prop(0),
}

//controller
var controller = function() {
	this.activePic = m.prop(model.activePic());
	this.jump = function(position) {
		this.activePic(Math.max(position,0)%(model.files().length));
	}.bind(this)
	this.next = function() {
		this.jump(this.activePic()+1);
	}.bind(this)
	this.prev = function() {
		this.jump(this.activePic()-1);
	}.bind(this)
}

//view
var view = function(ctrl) {
	var activePics =range(Math.max(ctrl.activePic()-1,0),ctrl.activePic()+3)
    return m("div.pics",
		{onclick: ctrl.next},
		[
			range(Math.max(ctrl.activePic()-2,0),ctrl.activePic(),fadesOut),
			range(ctrl.activePic(),ctrl.activePic()+1,fadesIn),
			range(ctrl.activePic()+1,ctrl.activePic()+5, fadesOut),
		])
}
function singleImg(index,callback) {
	return m("div.pic", {
		config: callback,
		key: index,
		style: {
			zIndex: 1000-index,
			backgroundImage: 'url(' + genFile(index) + ')'
			}
		}
	)
}
function genFile(index) {
	return model.path() + model.files()[index];
}
function range(start, end, callback) {
  for (var ret = []; start<end; start++) {
    ret.push(singleImg(start,callback));
  }
  return ret;
}

//view helpers
var fadesIn = function(element, isInitialized, context) {
	Velocity(element,"stop", true)
	element.style.left = "50%";
	element.style.opacity = 0;
	Velocity(element, {left: 0, opacity: 1});
}
var fadesOut =  function(element, isInitialized, context) {
		if (isInitialized) {
			Velocity(element, {left: "-50%",opacity: 0})
		} else...