JSFiddle - React, Tailwind, and code Playground

by Ajsa Ferguson

HTML

<div class="wrap">
    <div class="inner">
        <div class="item" data-n="2"></div>
        <div class="item" data-n="3"></div>
        <div class="item" data-n="4"></div>
        <div class="item" data-n="5"></div>
        <div class="item" data-n="6"></div>
        <div class="item" data-n="7"></div>
        <div class="item" data-n="8"></div>
        <div class="item" data-n="9"></div>
        <div class="item" data-n="10"></div>
        <div class="item" data-n="11"></div>
        <div class="item" data-n="12"></div>
        <div class="item" data-n="13"></div>
    </div>
</div>
<div class="log">
</div>

CSS

*, *::before, *::after {
    box-sizing: border-box;
}
html, body {
    padding: 0;
    margin: 0;
    max-height: 100%;
    overflow: hidden;
}
.wrap {
    position: relative;
}
.control {
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    position: absolute;
    padding: 10px;
    background: rgba(255,255,255,0.5);
    top: 50%;
    transform: translateY(-50%);
    color: #FFF;
    font-size: 20pt;
}
.control-left {
    padding-right: 20px;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    left: 0;
}
.control-right {
    padding-left: 20px;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    right: 0;
}
.inner {
    font-size: 0;
    white-space: nowrap;
    overflow: auto;
}
.item {
    position: relative;
    display: inline-block;
    font-size: 1rem;
    white-space: initial;
    padding-bottom: 33.3333%;
    width: 50%;
}
.item .darken {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.8);
}


.item[data-n="2"] {
    background-image: url(http://www.lorempixel.com/400/300/animals);
    background-size: cover;
}
.item[data-n="3"] {
    background-image: url(http://www.lorempixel.com/400/300/business);
    background-size: cover;
}
.item[data-n="4"] {
    background-image: url(http://www.lorempixel.com/400/300/cats);
    background-size: cover;
}
.item[data-n="5"] {
    background-image: url(http://www.lorempixel.com/400/300/city);
    background-size: cover;
}
.item[data-n="6"] {
    background-image: url(http://www.lorempixel.com/400/300/food);
    background-size: cover;
}
.item[data-n="7"] {
    background-image: url(http://www.lorempixel.com/400/300/nightlife);
    background-size: cover;
}
.item[data-n="8"] {
    background-image: url(http://www.lorempixel.com/400/300/fashion);
    background-size: cover;
}
.item[data-n="9"] {
    background-image:...

JavaScript

var log = function(event) {
    var log = document.querySelector('.log');
    log.innerHTML = event + "<br>" + log.innerHTML;
}
var wrap = document.querySelector('.wrap');
var inner = document.querySelector('.inner');
var items = document.querySelectorAll('.item');
var controlLeft = document.createElement('a');
controlLeft.className = 'control control-left';
controlLeft.href = 'javascript:void(0)';
controlLeft.innerHTML = '&lt;';
controlLeft.onclick = function() {
    log('click left');
    inner.scrollLeft++;
}
wrap.appendChild(controlLeft);
var controlRight = document.createElement('a');
controlRight.className = 'control control-right';
controlRight.href = 'javascript:void(0)';
controlRight.innerHTML = '&gt;';
controlRight.onclick = function() {
    log('click right');
    inner.scrollLeft--;
}
wrap.appendChild(controlRight);
var darken1 = document.createElement('div');
var darken2 = document.createElement('div');
darken1.className = 'darken';
darken2.className = 'darken';
items[0].appendChild(darken1);
items[2].appendChild(darken2);
var getWidth = function (element) {
    return Number(window.getComputedStyle(element, null).getPropertyValue('width').replace('px', '')) + 1;
};
wrap.style.overflow = 'hidden';
inner.style.overflowY = 'hidden';
inner.style.overflowX = 'auto';
wrap.style.height = inner.scrollHeight + 'px';
window.onresize = function () {
    wrap.style.height = inner.scrollHeight + 'px';
    inner.scrollLeft = 0;
    inner.scrollLeft = getWidth(items[0]) / 2;
};
inner.scrollLeft = getWidth(items[0]) / 2;
oldScroll = inner.scrollLeft;
inner.onscroll = function () {
    if (inner.scrollLeft < oldScroll) {
        log('scroll right');
        inner.appendChild(inner.querySelector('.item:first-child'));
        inner.querySelector('.item:first-child').appendChild(darken1);
        inner.querySelector('.item:nth-child(3)').appendChild(darken2);
    } else if (inner.scrollLeft > oldScroll) {
        log('scroll left');
        var first =...