JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div style="max-width: 800px; margin: 0 auto;">
    <ul class="card-slider">
        <li>
            <img src="http://dummyimage.com/1200x627/e5a7a7/353535.png" />
        </li>
        <li>
            <img src="http://dummyimage.com/1200x727/a5d5e2/353535.png" />
        </li>
        <li>
            <img src="http://dummyimage.com/1200x627/e0d1a6/353535.png" />
        </li>
        <li>
            <img src="http://dummyimage.com/1100x627/a6ddad/353535.png" />
        </li>
        <li>
            <img src="http://dummyimage.com/500x627/e5a7a7/353535.png" />
        </li>
        <li>
            <img src="http://dummyimage.com/1200x627/a5d5e2/353535.png" />
        </li>
        <li>
            <img src="http://dummyimage.com/1200x627/e0d1a6/353535.png" />
        </li>
        <li>
            <img src="http://dummyimage.com/600x400/a6ddad/353535.png" />
        </li>
        <li>
            <img src="http://dummyimage.com/1200x627/e5a7a7/353535.png" />
        </li>
        <li>
            <img src="http://dummyimage.com/1200x627/a5d5e2/353535.png" />
        </li>
        <li>
            <img src="http://dummyimage.com/1200x627/e0d1a6/353535.png" />
        </li>
        <li>
            <img src="http://dummyimage.com/1200x627/a6ddad/353535.png" />
        </li>
    </ul>
    <p>Donec vitae sapien ut libero venenatis faucibus. Praesent turpis. Cras dapibus. Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem. Etiam ultricies nisi vel augue. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce vulputate eleifend sapien. Ut non enim eleifend felis pretium feugiat. Aenean commodo ligula eget dolor. In ut quam vitae odio lacinia tincidunt. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Pellentesque ut neque. Cras non dolor. Vestibulum fringilla pede sit amet...

SCSS

/* BASE */
html,
body{
    margin: 0;
    padding: 10px;
    background-color: #eee;
    font-family: sans-serif;
}
ul{
    margin: 0 auto;
    padding: 0;
    li{
        list-style-type: none;
    }
}
img{
    max-width: 100%;
}
*{
    box-sizing: border-box;
}

/* CORE */
$transitionDuration: 300ms;
ul.card-slider{
    position: relative;
    display: none;
    & > li{
        width: 100%;
        text-align: center;
        padding: 10px;
        background-color: #f5f5f5;
    }
    &.card-slider-init{
        width: 100%;
        display: block;
        overflow: hidden;
        &.card-slider-ready{
            transition: padding-top $transitionDuration;
            & > li{
                transition: transform $transitionDuration, box-shadow $transitionDuration, opacity $transitionDuration;
            }
        }
        & > li{
            position: relative;
            transform-origin: center center;
            position: absolute;
            top: 50%;
            transform: translateY(-50%) scale(0.8);
            box-shadow: 0 15px 50px -10px rgba(0, 0, 0, 0.3);
            z-index: 3;
            opacity: 1;
            -webkit-user-select: none;
            &.pile-right,
            &.pile-left{
                box-shadow: 0 0 25px -5px rgba(0, 0, 0, 0);
                cursor: pointer;
            }
            &.active-slide{
                z-index: 4;
            }
            &.hidden-slide{
                opacity: 0;
            }
            &.pile-right{
                transform: translateY(-50%) translateX(20%) scale(0.6);
            }
            &.pile-left{
                transform: translateY(-50%) translateX(-20%) scale(0.6);
            }
        }
    }
}

JavaScript

/**
 * Card slider
 */

var cSlider = cSlider || {}

cSlider.init = function () {
    var _c = cSlider;
    _c.delay = 300;
    _c.intercept = _c.delay / 4;
    _c.sliders = document.querySelectorAll('.card-slider');
    _c.setupSliders();
}

cSlider.setupSliders = function () {
    var _c = cSlider;
    for (var i = 0; i < _c.sliders.length; i++) {
        var slider = _c.sliders[i];
        var slides = slider.childNodes;
        // Clean up
        for (var n = 0; n < slides.length; n++) {
            if (slides[n].tagName !== 'LI') {
                slider.removeChild(slides[n]);
            }
        }
        // Count
        var s = 1;
        if (slides.length < 3) {
            s = 0;
        }
        // Init slider
        slider.className += ' card-slider-init';
        slider.setAttribute('data-slidecount', slides.length);
        // Apply classes
        for (var n = 0; n < slides.length; n++) {
            var _e = slides[n];
            _e.setAttribute('data-slide', (n + 1));
            if (n < s) {
                _e.className = 'pile-left';
            } else if (n > s) {
                _e.className = 'pile-right';
            } else {
                _e.className = 'active-slide';
                _c.renderHeight(_e);
            }
        }
        _c.renderZIndex(slider);
        _c.renderOpacity(slider, 'right');
        _c.renderOpacity(slider, 'left');
        // Events
        slider.addEventListener('click', function (e) {
            _c.handleClick(e, slider);
        });
        setTimeout(function () {
            slider.className += ' card-slider-ready';
        }, 100);
    }
}

cSlider.handleClick = function (e, elem) {
    var x = e.offsetX / elem.offsetWidth;
    if (x < 0.5) {
        // Previous
        cSlider.prevSlide(elem);
    } else {
        // Next
        cSlider.nextSlide(elem);
    }
}

cSlider.nextSlide = function (elem) {
    if (elem.getAttribute('data-processing')) {
        return false;
    }
   ...