JSFiddle - React, Tailwind, and code Playground

by e_kurbanov

HTML

<div id="outer">
  <div id="inner">
    <img src="http://via.placeholder.com/150x85">
    <img src="http://via.placeholder.com/150x85">
    <img src="http://via.placeholder.com/150x85">
    <img src="http://via.placeholder.com/150x85">
    <img src="http://via.placeholder.com/150x85">
    <img src="http://via.placeholder.com/150x85">
    <img src="http://via.placeholder.com/150x85">
  </div>
</div>
<input id="next" type="button" value="next">
<input id="prev" type="button" value="prev">

CSS

* {
  box-sizing: border-box !important;
}
div#outer{
  position: relative;
  width: 500px;
  height: 100px;
  bordeR: 1px solid red;
  overflow: scroll;
}
div#inner{
  position: relative;
  min-width: 2000px;
  left: 0;
  border: 1px solid blue;
  transition: left 1s ease;
  
}
div#inner img{
  float: left;
  bordeR:1px solid red;
}

JavaScript

var next = document.getElementById('next');
function SmoothScroll(target, speed, smooth) {
        if (target == document)
            target = (document.documentElement || document.body.parentNode || document.body) // cross browser support for document scrolling
        var moving = false
        var pos = target.scrollTop
        target.addEventListener('mousewheel', scrolled, false)
        target.addEventListener('DOMMouseScroll', scrolled, false)

        function scrolled(e) {
            e.preventDefault(); // disable default scrolling
            var delta = e.delta || e.wheelDelta;
            if (delta === undefined) {
                //we are on firefox
                delta = -e.detail;
            }
            delta = Math.max(-1, Math.min(1, delta)) // cap the delta to [-1,1] for cross browser consistency

            pos += -delta * speed
            pos = Math.max(0, Math.min(pos, target.scrollHeight - target.clientHeight)) // limit scrolling

            if (!moving) update()
        }

        function update() {
            moving = true
            var delta = (pos - target.scrollTop) / smooth
            target.scrollTop += delta
            if (Math.abs(delta) > 0.5)
                requestFrame(update)
            else
                moving = false
        }

        var requestFrame = function() { // requestAnimationFrame cross browser
            return (
                window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function(func) {
                    window.setTimeout(func, 1000 / 50);
                }
            );
        }()
    }
    var nextScroll = function(){
        new SmoothScroll(document.getElementById('outer'),120,12)
    }
    
    next.addEventListener('click', function(){
       ...