JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div class="ec-scroller" id="demo">
  <div class="ec-scroller__inner">
    <ul>
      <li><a href="#!"><img src="https://images.unsplash.com/photo-1421987392252-38a07781c07e?crop=entropy&fit=crop&fm=jpg&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=500&h=300" /></a></li>
      <li><a href="#!"><img src="https://images.unsplash.com/photo-1433190152045-5a94184895da?crop=entropy&fit=crop&fm=jpg&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=500&h=300" /></a></li>
      <li><a href="#!"><img src="https://images.unsplash.com/photo-1432383079404-c66efb4828a3?crop=entropy&fit=crop&fm=jpg&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=500&h=300" /></a></li>
      <li><a href="#!"><img src="https://images.unsplash.com/photo-1452110040644-6751c0c95836?crop=entropy&fit=crop&fm=jpg&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=500&h=300" /></a></li>
      <li><a href="#!"><img src="https://images.unsplash.com/photo-1453106037972-08fbfe790762?crop=entropy&fit=crop&fm=jpg&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=500&h=300" /></a></li>
    </ul>
  </div>
</div>

SCSS

*,
*:before,
*:after{
  box-sizing: border-box;
}

body{
  margin: 0;
  background-color: #ececec;
}

.ec-scroller{
  background-color: #353535;
  position: relative;
  overflow: hidden;
  margin: 4em 0;
  
  ul.ec-scroller__controls{
    margin: 0 auto;
    padding: 0 0 1em;
    text-align: center;
    
    li{
      list-style-style: none;
      display: inline-block;
      padding: 4px;
      margin: 0 0.5em;
      background-color: #fff;
      opacity: 0.5;
      border-radius: 50%;
      transition: background-color 300ms, opacity 300ms;
      cursor: pointer;
      
      &:hover{
        opacity: 1;
      }
      
      &.active{
        background-color: #00C6EA;
        opacity: 1;
      }
      
    }
    
  }
  
  .ec-scroller__inner{
    padding: 1em;
    width: 70%;
    max-width: 500px;
    margin: 0 auto;
    //background-color: #888;

    ul{
      padding: 0;
      margin: 0;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: transform 600ms;

      li{
        list-style-type: none;
        margin: 0;
        padding: 0;
        transition: opacity 300ms;
        opacity: 0.6;
        text-align: center;
        position: relative;

        img{
          transition: transform 300ms, box-shadow 300ms;
          box-shadow: 0 0.8em 1.4em -0.8em rgba(0, 0, 0, 0.5);
        }

        &.active{

          img{ 
            transition-delay: 300ms;
            transform: scale(1);
            box-shadow: 0 1em 2em -1em rgba(0, 0, 0, 0.5);
          }

        }

        &:not(.active){

          img{
            transform: scale(0.8);
          }

          &:after{
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            cursor: pointer;
          }

        }

        &:hover,
        &.active{
          opacity: 1;
        }

      }

      img{
        display: block;
       ...

JavaScript

console.clear();

var ecscroller = function(elem){
	var _t = this;
  
  _t.ELEM = elem;
  _t.WRAP = elem.querySelector('.ec-scroller__inner');
  _t.TRACK = _t.WRAP.querySelector('ul');
	_t.IMAGES = [];
  _t.SLIDES = _t.TRACK.querySelectorAll('li');
  _t.ACTIVE_SLIDE = null;
  _t.CONTROLS = null;
  _t.CONTROL_POINTS = null;
  
  Array.prototype.forEach.call(elem.getElementsByTagName('img'), function(img){
  	_t.IMAGES[_t.IMAGES.length] = img;
  });
  
  
  if(_t.IMAGES.length <= 0){
  	return false;
  }
  
  // Setup layout
  _t.TRACK.style.width = (100 * _t.IMAGES.length) + '%';
  
  _t.buildNav();
  
  _t.clearActive();
  _t.goToSlide(0);
  
  _t.bindSlides();
  
  _t.ELEM.className += ' ec-scroller--init';
}

ecscroller.prototype.clearActive = function(){
	var _t = this;
  
  Array.prototype.forEach.call(_t.SLIDES, function(slide){
  	if(slide.className.match(/\bactive\b/ig)){
    	slide.className = slide.className.replace(/\s?\bactive\b/ig, '');
    }
  });
  
  Array.prototype.forEach.call(_t.CONTROL_POINTS, function(point){
  	if(point.className.match(/\bactive\b/ig)){
    	point.className = point.className.replace(/\s?\bactive\b/ig, '');
    }
  });
}

ecscroller.prototype.goToSlide = function(n){
	var _t = this;

	if(!_t.SLIDES[n] || n === _t.ACTIVE_SLIDE){
  	return false;
  }
  
  _t.clearActive();
  
  _t.SLIDES[n].className += ' active';
  _t.CONTROL_POINTS[n].className += ' active';
  _t.TRACK.style.transform = _t.TRACK.style.webkitTransform = _t.TRACK.style.MozTransform = _t.TRACK.style.msTransform = _t.TRACK.style.OTransform = 'translateX(-' + (100 / _t.IMAGES.length) * n + '%)';
  _t.ACTIVE_SLIDE = n;
}
  
ecscroller.prototype.bindGoTo = function(elem, n){
	var _t = this;
  
  elem.addEventListener('click', function(){
    _t.goToSlide(n);
  });
}

ecscroller.prototype.bindSlides = function(){
	var _t = this;
  
	for(var i = 0; i < _t.SLIDES.length; i++){
  	_t.bindGoTo(_t.SLIDES[i], i);
  }
}

ecscroller.prototype.buildNav = function(){
	var _t =...