JSFiddle - React, Tailwind, and code Playground

by mlms13

HTML

<div id="slideshow">
    <div class="slide" id="pulm">
        <h2>Slide Caption</h2>
        <div>image</div>
    </div>
    <div class="slide" id="cc"></div>
    <div class="slide" id="sleep"></div>
</div>

CSS

#slideshow {
    position: relative;
    height: 200px;
    overflow: hidden;
    width: 600px;
}

.slide {
    background-color: #4aa8aa;
    background-image: -webkit-linear-gradient(rgba(255,255,255,0.3), rgba(0,0,0,0.1));
    box-shadow: 0 0 6px rgba(0,0,0,0.3);
    height: 200px;
    left: 0;
    position: absolute;
    top: 0;
    width: 600px;
}

.slide h2 {
    background: #333;
    background: rgba(0,0,0,0.8);
    color: #fff;
    position: absolute;
    width: 500px;
}

.slide div {
    background: #fff;
    border: 1px solid #000;
    padding: 2px;
    height: 120px;
    width: 200px;
}

#pulm {
    background-color: #444;
}

#cc {
    background-color: #777;
}

#sleep {
    background-color: #ccc;
}

JavaScript

function Slide(id, index) {
    var self = this,
        baseIndent = 26 * index; // index is relative to other slides
    
    this.slideElement = document.getElementById(id);
    this.slideElement.style.left += baseIndent + 'px';
    
    this.moveLeft = function () {
        $(self.slideElement).animate({'left': baseIndent + 'px'}, 700);
    };
    this.moveRight = function (position) {
        // position tells us which slot on the right to move into
        var rightSpace = (position + 1) * 26,
            distance = 600 - (baseIndent + rightSpace);
                
        $(self.slideElement).animate({'left': '+=' + distance + 'px'}, 700);
    };
}

function Slideshow() {
    var self = this,
        slideshowElement = document.getElementById('slideshow'),
        slideElements = ['pulm', 'cc', 'sleep'],
        slides = [],
        currentIndex = 0;
    
    function makeHandler(i) {
        return function () {
            self.revealSlide(i);
        };
    }
    this.create = function () {
        var i, index;
        
        for (i = 0; i < slideElements.length; i++) {
            index = i;
            slides[i] = new Slide(slideElements[i], i);
            slides[i].slideElement.onmouseover = makeHandler(index);
        }
        currentIndex = slides.length - 1;
    };
    this.revealSlide = function (index) {
        var i;
        if (index === currentIndex) {
            return;
        }
        if (index > currentIndex) {
            // move each slide after and including index to the left
            for (i = currentIndex + 1; i <= index; i++) {
                slides[i].moveLeft();
            }
        }
        else {
            // move each slide after index to the right
            for (i = index + 1; i <= currentIndex; i++) {
                slides[i].moveRight((slides.length - 1) - i);
            }
        }
        currentIndex = index;
    };
}

var show = new Slideshow();
show.create();