JSFiddle - React, Tailwind, and code Playground

by azlar chen

HTML

<div class='wrapper'>


<div class='parent layers' id='slider'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>
</div>


<div class='ctrl'>
<button id='prev'>
prev
</button>

<button id='next'>
next
</button>
<button id='rand'>
rand
</button>
</div>

SCSS

.wrapper {
	height: 500px;
	width: 1000px;
  overflow-x: hidden;
  /* overflow-y: visible; */
  padding: 100px 50px;
  /* border: 1px solid #eee; */
  
  margin: 50px auto;
}
* {
  box-sizing: border-box;
}

.parent {
	height: 100%;
	width: 620px;
	display: flex;

	transition: all .1s;
  &.blink,
  &.blink > div {
    transition-duration: 0;
    
  }  
	> div {
		min-height: 100px;
    height: 100px;
    min-width: 200px;
		background-color: rgba(0,0,255, .7);
    margin: 0 50px;
    transition: all .1s;
    
    display: flex;
    justify-content: center;
    align-items: center;
    &:nth-child(odd) {
      background-color: rgba(255,0,0, .2);
    }
	}
}

.ctrl {
  position: fixed;
  bottom: 20px;
  left: 0;
}

JavaScript

/* var Slider = function (dom) {
  this.width = 200;
  this.gap = 5;
  this.visibleCount = 3;
  
  this.dom = null;
}

Slider.prototype.next = function () {

} */


(function () {
  let gap = 5;
  let visibleItemCount = 3;
  let itemWidth = 200;
  let animating = false;
  let blinking = false;

  let next = document.getElementById('next');
  let prev = document.getElementById('prev');
  let rand = document.getElementById('rand');
	
  let slider = document.getElementById('slider');
  let items = slider.querySelectorAll('div');
  let allItems;
  let actionQueue = [];

  let nowActiveIndex = 0;
  
	function init() {
  	let first = items[0].cloneNode(true),
    		second = items[1].cloneNode(true),
	    	last = items[items.length - 1].cloneNode(true),
        secondLast = items[items.length - 2].cloneNode(true);
		
    first.innerText = 'fake' + first.innerText;
    last.innerText = 'fake' + last.innerText;
    
    slider.appendChild(first);
    slider.insertBefore(last, items[0]);
    allItems = slider.querySelectorAll('div');
    
    slider.addEventListener('transitionend', () => {
				animating = false;
    });
    
    setTimeout(() => {
        slider.appendChild(second);
        slider.insertBefore(secondLast, last);
        active(nowActiveIndex);
    }, 0);
  }

  init();

  prev.addEventListener('click', function () {
  	let target = nowActiveIndex - 1;
	  target = target < -1 ? (items.length - 2) : target;
		
    moveStart(target);
		//active(nowActiveIndex, target);
  });
	next.addEventListener('click', function () {
  	let target = nowActiveIndex + 1;
	  target = target > (items.length) ? 1 : target;

    moveStart(target);
		//active(nowActiveIndex, target);
  });
  rand.addEventListener('click', function () {
  	let target = Math.round(Math.random() * 10);
    moveStart(target);
  });

	function moveStart(targetIndex) {
    if (animating) {

	    return;
    }
    
		if ([-1, items.length].indexOf(nowActiveIndex) !== -1) {
    	let tmpTarget =...