JSFiddle - React, Tailwind, and code Playground

by Artem

HTML

<div class="view">
  <ul id="view__list">
    <li><img src="https://placeimg.com/400/250/people/grayscale" alt=""></li>
    <li><img src="https://placeimg.com/400/250/nature/grayscale" alt=""></li>
    <li><img src="https://placeimg.com/400/250/tech/grayscale" alt=""></li>
    <li><img src="https://placeimg.com/400/250/architecture/grayscale" alt=""></li>
    <li><img src="https://placeimg.com/400/250/animals/grayscale" alt=""></li>
  </ul>
</div>
<div class="controls">
  <button type="button" data-toggle="prev">Назад</button>
  <button type="button" data-toggle="next">Вперед</button>
</div>

CSS

body{
  height: 250px;
  width: 400px;
  margin: 0 auto;
}
.view {
  overflow-y: hidden;
  position: relative;
}

ul {
  position: relative;
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  min-height: 250px;
}
.controls {
  display: flex;
  justify-content: space-between;
}

JavaScript

(function(){
	'use strict';
  var viewList = document.querySelector('#view__list'),
  		imgs = document.querySelectorAll('li'),
  		imgsW = imgs[0].clientWidth,
  		imgsCount = imgs.length,
  		totalW = imgsW * imgsCount;
      
  viewList.style.left = 0 + 'px';
  
  var direction = 1;
  var current = 0;
  var currentPos = 0, newPos;
  
  document.querySelector('.controls').addEventListener('click', function(e){
  	(e.target.dataset.toggle == 'next') ? direction = 1 : direction = 0;
    	slide(direction, current);
  }, false);
  
  function slide(dir, current){
  	if(currentPos != - ((current+ 1) * imgsW)){
    	currentPos = parseInt(viewList.style.left.slice(0, -2), 10) - 20;
  		viewList.style.left = currentPos + 'px';
  		setTimeout(slide, 1);		
    } else {
    	(dir == 1) ? current++ : current--;
    }
  }
  
})();