JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

slider   http://css3.bradshawenterprises.com/blog/css-variables/

http://dev.w3.org/csswg/css-variables/

CSS

/* Prefixes omitted for clarity */
#calcTest {
  var-width: 100px;
}
#calcTest div p {
  padding-top: 10px;
}
#calcTest div {
  outline:1px black solid;
  height:40px;
  text-align: center;
  width: calc(var(width) * 1);
}
#calcTest div:nth-child(2) {
  width: calc(var(width) * 2);
}
#calcTest div:nth-child(3) {
  width: calc(var(width) * 3);
}

JavaScript

$(document).ready(function() {
  $('#slide1_controls').on('click', 'span', function(){
    $("#slide1_images").css("transform","translateX("+$(this).index() * -450+"px)");
    $("#slide1_controls span").removeClass("selected");
    $(this).addClass("selected");
  });
});